node-sass@4.14.1报错的最终解决方案分享

输入npm i全安装文件所需的依赖的时候,博主是使用sass去书写的,使用的是node-sass@4.14.1和sass-loader@7.3.1的版本的,安装的时候老是出现错误,

node-sass@4.14.1版本不再被支持的原因

node-sass 是一个基于 LibSass 的 Node.js 绑定,用于将 SCSS/Sass 编译成 CSS。然而,LibSass 项目已经停止维护,这意味着它不再接受新的功能更新或安全修复。由于 node-sass 依赖于 LibSass,随着 LibSass 的停止维护,node-sass 也逐渐失去了支持。特别是 node-sass@4.14.1 这个版本,由于不再接收更新,可能会存在与最新 Node.js 版本的兼容性问题,甚至可能包含未修复的安全漏洞。

如果是新项目,就升级替换 node-sass,一劳永逸

复制代码
替代 node-sass 的方案
一个广泛接受的替代方案是 dart-sass(也称为 sass)。dart-sass 是 Sass 的官方实现,由 Dart 语言编写,并且完全兼容 Sass 语法。与 node-sass 相比,dart-sass 更稳定、更快速,并且持续得到官方的支持和维护。

如何迁移到 dart-sass 的步骤
‌卸载 node-sass‌:

bash
Copy Code
npm uninstall node-sass
‌安装 sass‌:

bash
Copy Code
npm install sass
‌更新构建脚本‌:

如果你在使用构建工具(如 Webpack、Gulp 等),需要确保它们使用 sass 而不是 node-sass。通常,这只需要更改配置文件中的加载器或插件即可。

例如,在 Webpack 中,你可能需要将 sass-loader 的配置从:

javascript
Copy Code
{
    test: /\.scss$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
}
更改为:

javascript
Copy Code
{
    test: /\.scss$/,
    use: [
        'style-loader',
        'css-loader',
        'sass'  // 直接使用 sass 而不是 sass-loader,后者现在默认使用 dart-sass
    ]
}
注意迁移过程中可能出现的兼容性问题
尽管 dart-sass 尽可能保持与 Sass 语法的兼容性,但在某些边缘情况下,特别是在使用特定于 node-sass 的特性时,可能会出现差异。因此,在迁移后,建议仔细检查编译后的 CSS 是否符合预期,并特别注意任何样式或布局上的变化。

建议在迁移后进行充分的测试
迁移后,进行全面的测试是非常重要的。这包括单元测试、集成测试以及用户接受测试(UAT),以确保新功能或更改没有引入任何问题。特别是,应关注那些依赖于复杂样式逻辑或特定于 node-sass 的行为的组件和页面。

通过遵循上述步骤和建议,你可以有效地从 node-sass 迁移到 dart-sass,同时确保项目的稳定性和安全性。

**如果是旧的项目,就降低nodejs版本,**下篇文章将会具体讲解

最后的方法我只能降级node去安装,终于,在降级后就可以安装了,现在的node最新是v16,要支配node-sass@4.14.1可以把node降级到v12,至于怎么降级,可以使用nvm去降级,这个很方便去改变node的版本。

相关推荐
kyriewen9 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
蜗牛前端9 小时前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员10 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端
老王以为10 小时前
React Renderer 分离的多平台架构
前端·react native·react.js
hunterandroid10 小时前
Kotlin Coroutines 与 Flow:让异步任务更清晰
前端
Bigger11 小时前
从零搭建 AI 代码审查服务:一份前端也能看懂的 Python 学习笔记
前端·ci/cd·ai编程
lichenyang45311 小时前
JSAPI、NAPI、Biz、Imp:ASCF Demo 如何真正调用系统能力和 C++ 能力
前端
lichenyang45311 小时前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端
用户0595401744611 小时前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css
用户21366100357212 小时前
Vue2脚手架工程化与Axios集成
前端·vue.js