1.首先是vue项目中使用scss,网上教程比较多也很全面,简单扒一些
安装sass 依赖包 ,在cmd界面输入:
npminstallsass-loader--save-dev
npminstallnode-sass--sava-dev
2.在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style','css','sass']
}
3.使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法,否则报错
---------------------------------------------------------分割线-------------------------------------------------
按照正常方法,上面这几步完成后重新npm run dev 就可以运行查,写几句scss样式就可以看到效果,但是我在使用时报错
原因主要是我们sass-loader的版本太高,导致webpack编译时出错。
解决:打开我们的package.json,修改sass-loader的版本为7.3.1
执行命令,重新安装项目依赖
$ npm install
然后,启动项目
$ npm run dev
项目启动成功,编译报错问题解决