在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。
1. npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
2. npm install sass-resources-loader --save-dev
3.修改build中得utils.js
scss: generateLoaders(‘sass‘) ???修改成: ???scss: generateLoaders(‘sass‘).concat( ?????{ ???????loader: ‘sass-resources-loader‘, ???????options: { ?????????resources: path.resolve(__dirname, ‘../src/assets/global.scss‘) ???????} ?????} ???)
4.修改scss文件名为global.scss
vue安装scss,并且全局引入
原文地址:https://www.cnblogs.com/dujunfeng/p/8566772.html