sass全局变量配置

Vue sass全局变量的使用

css ：variables.scss

$themeColor: #409eff;

在组件中使用

<style lang='scss'>
  .block2 {
    background: $themeColor;
  }
</style>

报如下错误：

 error  in ./src/components/focus-city/index.vue?vue&type=style&index=0&lang=scss&scope=true&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$themeColor".
        on line 197 of /Users/bing/Desktop/TDT/ipd-web/library/src/components/focus-city/index.vue
>>         background: $themeColor;

   --------------------^


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/style
PostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/d
ist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/focus-city/index.vue?vue&type=style&index=0&lang=scss&scope=true
& 4:14-465 14:3-18:5 15:22-473
 @ ./src/components/focus-city/index.vue?vue&type=style&index=0&lang=scss&scope=true&
 @ ./src/components/focus-city/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/v
ue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/views lazy ^\.\/.*$ namespace object
 @ ./src/utils/menuToRouterArr.js
 @ ./src/permission.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.131.18.90:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/views/doc/pages/focus-city.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$themeColor".
        on line 94 of /Users/bing/Desktop/TDT/ipd-web/library/src/views/doc/pages/focus-city.vue
>>   background: $themeColor;

   --------------^


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/doc/pages/focus-city.vue?vue&type=style&index=0&lang=scss& 4:14-477 14:3-18:5 15:22-485
 @ ./src/views/doc/pages/focus-city.vue?vue&type=style&index=0&lang=scss&
 @ ./src/views/doc/pages/focus-city.vue
 @ ./src/views lazy ^\.\/.*$ namespace object
 @ ./src/utils/menuToRouterArr.js
 @ ./src/permission.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.131.18.90:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决方法：
1、安装完sass依赖包：

npm install sass-resources-loader --save-dev

2、相关配置
vue-cli3.0创建的项目
在vue.config.js文件中配置，官网配置

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 旧版 在 sass-loader v7 中，选项名使用data
        data: `@import "[email protected]/assets/scss/variables.scss";` 
        // 新版sass-loader，选项名使用prepend
        prependData: `@import "[email protected]/assets/scss/variables.scss";`
      }
    }
  }
};

注：1、本配置适用于.scss .sass文件(<style lang="scss"></style>)
<style></style>直接css的样式不能用
2、默认情况下 sass 选项会同时对 sass 和 scss 语法同时生效，因为 scss 语法在内部也是由 sass-loader 处理的。但是在配置 data 或prepend选项的时候.scss语法要求以分号结尾，.sass语法要求必须没有分号。