node版本升级后vue项目启动错误(node-sass sass-loader)

本文讲述了在升级Node.js到v16.15.1后,遇到node-sass版本不匹配的404错误,通过查阅版本对应表并调整node-sass和sass-loader版本解决了问题。

在升级完node版本后启动项目发现报错,这是由于版本兼容导致的,关键报错如下:

Downloading binary from https://npm.taobao.org/mirrors/node-sass/v4.12.0/win32-x64-93_binding.node
Cannot download "https://npm.taobao.org/mirrors/node-sass/v4.12.0/win32-x64-93_binding.node": 

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g. 

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.12.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.12.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2022-06-15T13_59_40_556Z-debug.log

以前的版本信息:

在这里插入图片描述
以前我的node版本为:v14.5.1

又去看了下nodesass-node的版本对应表

在这里插入图片描述
可以看到前面是没问题的,但是我现在node版本升级为了:v16.15.1

所以node-sass就必须要6.0+的版本才行

还得去看node-sasssass-loader的对应版本,把sass-loader也换为对应的版本

我这里v16.15.1需要的版本:

npm install node-sass@6.0.1 sass-loader@10.2.0

版本更换完成,问题解决。

### Vue3 项目中安装 `node-sass` 和 `sass-loader` 后的配置需求 在 Vue3 项目中,安装 `node-sass` 和 `sass-loader` 后,通常需要进行额外的配置以确保它们能够正常工作。以下是关于是否需要配置以及具体配置方法的详细说明: #### 是否需要额外配置 安装完 `node-sass` 和 `sass-loader` 后,通常需要对项目中的 Webpack 配置进行调整,以确保 SASS 文件能够被正确解析和编译[^2]。Vue CLI 提供了内置的 Webpack 配置管理工具,可以简化这一过程。 #### 具体配置方法 以下是一些常见的配置方式,适用于不同的开发环境: #### 方法一:使用 Vue CLI 的内置配置 如果项目是通过 Vue CLI 创建的,则可以通过 `vue.config.js` 文件添加配置: ```javascript module.exports = { css: { loaderOptions: { sass: { // 在此处传递全局的 SASS 变量或导入文件 additionalData: `@import "@/styles/_variables.scss";` } } } }; ``` 此配置会将指定的 SASS 文件(例如 `_variables.scss`)作为全局样式引入,从而避免重复定义变量或混合宏[^4]。 #### 方法二:手动修改 Webpack 配置 对于自定义 Webpack 配置的项目,可以在 `webpack.config.js` 中添加以下内容: ```javascript module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: require('node-sass'), sassOptions: { fiber: require('fibers'), indentedSyntax: true // 如果使用缩进语法 } } } ] } ] } }; ``` 此配置明确指定了 `sass-loader` 的实现为 `node-sass`,并提供了额外的选项以优化性能[^1]。 #### 方法三:确保版本兼容性 在某些情况下,`node-sass` 和 `sass-loader` 的版本不匹配可能会导致问题。建议根据项目需求选择兼容的版本组合。例如,`sass-loader@7.3.1` 和 `node-sass@4.13.1` 是一个已验证的稳定组合[^3]。 #### 注意事项 - 如果使用的是 Dart Sass(即 `dart-sass`),则无需单独安装 `node-sass`,因为 `dart-sass` 是纯 JavaScript 实现,可以直接通过 `sass-loader` 使用。 - 确保项目中没有冲突的依赖项,例如同时存在 `node-sass` 和 `dart-sass`,这可能导致构建失败。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值