解决Module not found: Error: Can‘t resolve ‘sass-loader‘ in ‘******‘和node-sass和sass-loader版本不兼容问题

☜阳光

已于 2023-06-15 09:24:30 修改

阅读量6.4k

点赞数 27

分类专栏： Vue 文章标签： Vue scss sass-loader node-sass 版本兼容性

于 2022-07-22 16:35:05 首次发布

本文链接：https://blog.csdn.net/qq_52030824/article/details/125933607

版权

2 篇文章 0 订阅

订阅专栏

由于我是第一次在Vue项目中使用scss文件，所以对这方面的知识了解的不多，导致出现一个BUG耽误了我半天时间，下面就来看看该问题以及对应的解决方案吧。

 下面是在一个组件当中引入了一个scss文件

在这里插入图片描述
重新运行项目发现报错，意思也就是说“没有找到sass-loader模块” 那下面看看sass-loader和node-sass的作用吧

sass-loader的作用就是加载 Sass/SCSS 文件并将他们编译为 CSS。
而node-sass模块就是对sass-loader的支持模块。

而我当前项目当中并没有安装node-sass和sass-loader，所以我就执行以下命令分别安装node-sass、sass-loader，

npm install node-sass
npm install sass-loader

两个都安装好了，但是又报错，说是版本过高不兼容，因为采用以上命令默认是安装最新版本，好嘛，那我就降低版本，又报错说版本低，建议升级，我晕死。然后我又找了多个版本的node-sass和sass-loader进行实验，最终都失败了

删除node-sass和sass-loader

npm uninstall sass-loader node-sass

下面是Node.js和node-sass版本的对应信息（官网查看node.js和node-sass版本的对应关系），而我的Node版本是16.15.1
在这里插入图片描述

最后耗了大半天的时间，终于让我找到一个方法可以解决，那就是不要安装node-sass，安装sass就可以了

npm install sass-loader@8.0.2 sass@1.26.5  --save-dev

在项目中的package.json文件当中查看sass-loader和sass对应的版本号

在这里插入图片描述

在这里插入图片描述
之后项目正常运行。

关注

专栏目录