在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 --sava-dev

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

{

test: /\.scss$/,

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

}

 

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

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

 

 

 

5.效果

在Vue项目中使用Sass-----(scss)安装详解,新手跟着做即可_第1张图片

你可能感兴趣的:(Sass,VUE)