该文章已同步收录到我的博客网站，欢迎浏览我的博客网站，xhang’s blog

由于我是第一次在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对应的版本号

之后项目正常运行。

借鉴博客