VUE2中引入外部css文件的方式

利用 @import 关键词引入, 此方式是一个全局引入scr 路径引入在 JS 中引入外部css模块<template><div></div></template><script>// 在JS中引入外部css模块import './assets/my.scss'// 与@import效果相同, 会影响所有组件</script&g

记忆怪 bug

5538人浏览 · 2022-03-05 20:49:24

记忆怪 bug · 2022-03-05 20:49:24 发布

利用 @import 关键词引入——全局引入
scr 路径引入——局部引入
在 JS 中引入外部css模块————全局引入

<template>
  <div></div>
</template>

<script>
    // 在JS中引入 外部css模块
    import './assets/my.scss'
    // 与@import效果相同, 会影响所有组件
</script>

 // 方式2: 此引入方式不会影响到子组件, 受scoped 影响
<style lang="scss" scoped src="./assets/my.scss">
   
</style>

<style lang="scss" scoped>
  // 外部css样式: 文件需要存储在 assets 目录下
  // 方式1: 利用 @import关键词引入, 此方式是一个全局引入, 会忽略scoped 关键词, 影响所有组件
  // @import url('./assets/my.scss');
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^