在vue中配置使用SCSS预编译

前言

vue-cli 使用webpack模板生成的项目需要引入scss预处理器，网上散人教程不够官方，这里参照官方文档写一个简化步骤

步骤

1. 1 2 3 4

   # use npm npm install sass-loader node-sass --save-dev # use yarn yarn add -D sass-loader node-sass

2. 1 2 3 4 5 6 7 8 9 10 11

   // bulid文件夹下的webpack base配置中的module的rules数组加入以下对象 { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss"> sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> } } }

3. style中lang改为scss即可

   1 2 3

   <style lang="scss"> </style>

需要的同学可以收藏

（逃）