vue-cli项目中使用sass遇到的坑

在Windows下,sass基于ruby使用,所以第一步先安装ruby.
在vue项目中,分别安装node-sass 、sass-loader

npm install sass-loader --save-dev   //安装sass-loader,这时候安装的是最新版本的sass
npm install node-sass --save-dev     //安装node-sass

然后在build/webpack.base.conf.js做修改
vue-cli项目中使用sass遇到的坑_第1张图片
在module ——> rules里面添加代码

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

这时候是报错的
vue-cli项目中使用sass遇到的坑_第2张图片
各种百度,各种搜索,最后找到问题了,是因为版本过高导致的报错。把当前sass-loader卸载掉,安装指定的低版本,即可正常运行。例如:

npm uninstall sass-loader  //卸载
npm install [email protected]  //安装指定版本

你可能感兴趣的:(sass)