vue 之使用 scss 的全局变量

写在前面

如果在每一个.vue文件都引入import scss文件，还是比较麻烦的，但是main.js可以直接import css文件，而不可以直接import scss文件； 所以直接全局搞定，无需任何地方引入 步骤如下：

1.安装node-sass、sass-loader、style-loader、sass-resources-loader

npm install xxx --save
复制代码

2. 修改配置文件

vue-cli 2x用法

//修改build中的utils.js
//将：
scss: generateLoaders('sass'),
//改为：
scss: generateLoaders('sass').concat(//使用scss的全局变量

{

loader: 'sass-resources-loader',

options: {

resources: path.resolve(__dirname, '../src/common/resource.scss') //这个是放置scss文件的路径

}

}

)

复制代码

vue-cli 3.0用法

//增加vue.config.js文件配置css
 css: {
    loaderOptions: {
        sass: {
          // @/ is an alias to src/
          // so this assumes you have a file named `src/variables.scss`
          data: `@import "@/scss/resource.scss";`
        }
    }
},
复制代码

举例子啦！！

//resource.scss
$white:#fff;
//a.vue
<style scoped  lang="scss">
body{
color: $white;
}
</style>
复制代码

【注】：

1、上面引入的文件只需引入一个全局（resource.scss）的，其他文件可以在resource.scss中引入 2、.vue文件中的style标签中必须添加lang="scss"，这样scss文件中的变量引入进来才是正确滴打开方式