坑爹的scss：怎样在vue项目安装使用scss（node-sass和sass-loader遇到的所有坑）

Myth丶恋晨 2022-11-07 05:48 271阅读 0赞

我想在vue项目使用scss，结果花了大量时间。遇到了很多问题，经历了回滚。以及删除所有安装包。卸载更换不同的版本。。。。。。。。

现在专门理顺一下。正确的操作方法：

1，安装：

温馨提示：之前看资料导致我裁了坑。这里只需要安装node-sass和sass-loader，因为我的vue项目已经默认安装了 vue-style-loader，不要多此一举。免得版本冲突。到时候又会出现更多问题。

> npm install node-sass --save-dev //安装node-sass   
> npm install sass-loader --save-dev //安装sass-loader

2，配置：

webpack.base.conf.js找不到？可以在build文件夹里面找到

在webpack.base.conf.js 文件下的配置 rules

> rules:\[  
> ...  
> \{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别scss!  
>     test: /\\.scss?$/,  
>     loaders: \["style", "css", "sass"\]  
> \}

这里安装好了之后，开始使用就报错：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

这个报错：

> Module build failed: TypeError: this.getOptions is not a function

网上说是因为sass-loader安装的版本太高，卸载重新安装低版本即可，网上大部分都是安装的7的版本，我装的是7.3.1

方法：

先卸载之前的sass-loader版本：

>     npm uninstall sass-loader

然后重新装7.3.1的版本：

>  npm install sass-loader@7.3.1 --save-dev

安装好了之后，这个问题解决了。又会有另一个新的错误：

> Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

此错误来自sass-loader.因为node-sass@latest为v5.0.0,而sass-loader**期望值为^4.0.0**  
目前解决方案如下：  
//卸载 node-sass

> npm uninstall node-sass -D

//然后安装最新版本（5.0之前）

温馨提示：

1，  --save-dev  等价于 -D

2，带版本号的 -D要写在前面

> cnpm install -D node-sass@4.14.1

大功告成！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1][]

[https://blog.csdn.net/weixin\_42390302/article/details/109443294][https_blog.csdn.net_weixin_42390302_article_details_109443294]

[https://blog.csdn.net/m0\_37605642/article/details/90437925?utm\_medium=distribute.pc\_relevant.none-task-blog-baidujs\_baidulandingword-0&spm=1001.2101.3001.4242][https_blog.csdn.net_m0_37605642_article_details_90437925_utm_medium_distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0_spm_1001.2101.3001.4242]

[https://blog.csdn.net/qq\_27449993/article/details/95048760][https_blog.csdn.net_qq_27449993_article_details_95048760]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221023/01a551e232294643b6819ce69f9c5384.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1]: /images/20221023/d1f5dc17928545adadc3565ae1024631.png
[https_blog.csdn.net_weixin_42390302_article_details_109443294]: https://blog.csdn.net/weixin_42390302/article/details/109443294
[https_blog.csdn.net_m0_37605642_article_details_90437925_utm_medium_distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0_spm_1001.2101.3001.4242]: https://blog.csdn.net/m0_37605642/article/details/90437925?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242
[https_blog.csdn.net_qq_27449993_article_details_95048760]: https://blog.csdn.net/qq_27449993/article/details/95048760