vue 之使用 scss 的全局变量

写在前面css

若是在每个.vue文件都引入import scss文件，仍是比较麻烦的，可是main.js能够直接import css文件，而不能够直接import scss文件； 因此直接全局搞定，无需任何地方引入 步骤以下：vue

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

npm install xxx --save
复制代码

2. 修改配置文件

vue-cli 2x用法vue-cli

//修改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用法npm

//增长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";`
        }
    }
},
复制代码

举例子啦！！sass

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

【注】：bash

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