【vue系列】在Vue项目中使用Sass-----（scss）安装详解，新手跟着做即可

提示：不用安装其他环境--网上其他地方说什么安装rubby？环境，在这不用---

Vue项目上安装scss--

1.使用vue-cli模板创建新项目：

vue init webpack myvue

2.安装sass 依赖包 ，在cmd界面输入：

npm  install sass-loader --save-dev

npm install node-sass --save-dev

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

{

test: /\.scss$/,

loaders: ['style', 'css', 'sass']

}

 

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

scss使用测试：如下测试修改字体颜色

<style lang="scss">

$color:blue;

div {color:$color;}

</style>

 

 

 

5.效果