* Vue-cli如何使用scss *
一.今天在使用vue-cli的时候发现一个错误,这个错误是我在标签上使用lang=”scss”时发生的.
@ ./node_modules/vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader?
{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?
{"vue":true,"id":"data-v-867e5006","scoped":true,"hasInlineConfig":false}
!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}
!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header.vue 4:14-417 13:3-17:5 14:22-425仔细看这个代码发现是需要装 css-loader 和 sass-loader
使用npm安装后还是报错
This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-29e8c3c6","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector?type=styles&index=0!./header.vue in ./src/components/header.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-29e8c3c6","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector?type=styles&index=0!./header.vue二.再次仔细查看代码,发现这个错误是webpack打包时未找到scss依赖模块
去webpack官网看文档发现管理资源->加载css中有这样一段话
webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种 情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。
在官方文档中用的是webpack.config.js,但在vue2.5中应该到build文件夹下的webpack.base.config.js文件中找
我一开始使用的是scss不行,后来想到编译scss的时候用的是sass
在查找资料的过程中
css-loader 是处理css文件中的url()等
style-loader 将css插入到页面的style标签
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css