该文章已同步收录到我的博客网站,欢迎浏览我的博客网站,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对应的版本号

在这里插入图片描述

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

借鉴博客

GitHub 加速计划 / no / node-sass
8.5 K
1.33 K
下载
:rainbow: Node.js bindings to libsass
最近提交(Master分支:2 个月前 )
6081731a Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
62c0f46c Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐