vue--全局引入公共的scss,不需要每个vue中引入

2020-07-13 3,256 阅读1分钟

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

安装

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

修改配置

vue-cli 3.0用法

//增加vue.config.js文件配置css
css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        //在 sass-loader v7 中，这个选项名是 "data" , sass-loader v8 中，，这个选项名是 "prependData" , 
        data: `@import "@/assets/styles/public.scss";`,
       // prependData: `@import "@/assets/styles/public.scss";`
      }
    }
},

"node-sass": "^4.14.1",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"sass-resources-loader": "^2.0.3",
"style-loader": "^1.2.1",

<style lang="scss">
// @import "../assets/styles/public.scss";
.button {
  color: $color_red;
  // color:red
}
</style>

向预处理器 Loader 传递选项 vue 之使用 scss 的全局变量