vue中如何使用scss_webpack scss vue

第一步，创建vue项目，vue init webpack myvue
第二步，安装scss，项目运行cmd中输入

npm  install sass-loader --save-dev
npm install node-sass --sava-dev
1
2

第三步，在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
1
2
3
4

第四步，使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

<div class="one">
      <p>我长得很帅</p>
</div>
<style lang="scss" scoped>
       .one{
           width:100%
             p{
                   font-size:18px;
             }
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

这样我们的scss就能正常的跑起来了。。。。
如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！