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
  1. 修改 build 中的 utils.js
    ```
    // 将:
    scss: generateLoaders('sass'),
    // 改为:
    scss: generateLoaders('sass').concat(// 使用 scss 的全局变量

{

loader: 'sass-resources-loader',

options: {

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

}

}

)

**举例子啦!!**

//theme.scss
$white:#fff;
//a.vue


```
【注】:

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