在VUE项目中使用SCSS

当vue项目已将建立好以后，只需要三步：

第一，安装scss依赖

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

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

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

第三：在style处添加  lang="scss"

<style scoped lang="scss">

#actived {
  h1{
    font-size:25px;
    color:red;
  }
  .ceshi{
    font-size:18px;
    color:blue;
  }
}

</style>

 

此外还推荐看  广积粮的  这篇也挺详细的https://blog.csdn.net/zhouzuoluo/article/details/81010331