将node-sass升级为dart-sass，踩坑实录

最新推荐文章于 2024-10-21 19:36:43 发布
最新推荐文章于 2024-10-21 19:36:43 发布
阅读量7.8k 收藏 25
点赞数 22
文章标签： node.js javascript css3 sass webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44466651/article/details/120744431
版权
本文记录了将项目中node-sass升级为dart-sass的过程，包括卸载node-sass，安装dart-sass及其遇到的版本兼容问题，如sass-loader与webpack版本匹配，以及sass-loader配置选项的变化。在解决过程中，还遇到了循环引入导致的编译错误，最终通过修改webpack配置和处理引入语句解决了所有问题。在项目启动后，由于采用微前端架构，一个子应用出现错误，通过调整代码或重启项目得以修复。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 首先将node-sass卸载
    npm uninstall node-sass
  2. 安装dart-sass
    这里已经是踩坑第一步了，实际上不能理所当然的觉得是 npm install dart-sass ，因为虽然dart-sass名确实为dart-sass，但也是sass官方最开始为了区分node-sass来作出的一个命名，而后node-sass就已经被完全弃用，因而dart-sass也被弃用，统一使用sass来作为dart-sass。
    在这里插入图片描述
    因此，此步正确做法如下
    npm install sass -D
  3. 在安装完正确版本的dart-sass以后，出现了无法编译的问题，苦苦找寻感觉是sass-loader版本过久无法编译，于是重新安装sass-loader
npm install sass-loader -D
  1. 在安装完全套最新的sass后，差点以为就成功了，然而却出现了 TypeError: this.getOptions is not a function 这个错误。原来是sass-loader v11以后需要webpack v5才能兼容，于是只能将sass-loader降级为v10
npm install sass-loader@^10 -D
  1. 在安装完合适的sass-loa
最低0.47元/天 解锁文章
随意的ID
关注
vue中把node-sass换成dart-sass方式（解决办法）
快乐学习
02-22 4275
因为node-sass和node.js版本关联太紧了，如果这两个版本不匹配，就会起冲突，导致项目无法运行。（3）不存在二进制文件安装，避免了node-sass因为依赖其他文件导致运行失败。（1）执行编译过程中，dart-sass内存占用比node-sass要大一点。node-sass是实时编译的，dart-sass是需要保存后才会生效。（2）避免项目以及其他的依赖升级node-sass导致不兼容问题。这样就用dart-sass替代了node-sass完成了。二、art-sass和node-sass的区别。
node-sass替换成Dart-sass（全是坑）
最新发布
晨曦的博客
03-16 556
还好最后成功了，不然还准备要升级webpack版本试试，但/deep/换成::v-deep,人要死，样式都不行了，要一个个改。改了好久，人都改傻了，我是用的node：14.21.3，vue：2.5.2，webpack": "^3.12.0"修改前package.json。
node-sass升级为sass
o11111123456l的博客
04-24 1763
node-sass安装太折磨人了，每次都要搞很长时间，还要依赖node环境，我装你个鬼。安装sass不香吗。1、卸载 node-sass：npm uninstall node-sass。2、安装 sass：npm install sass --save-dev。3、全局搜索替换：/deep/ 替换为 ::v-deep。
Scss--将node-sass切换为sass(原dart-sass)
日常分享
05-15 954
原文网址：Scss--将node-sass切换为sass(原dart-sass)_IT利刃出鞘的博客-CSDN博客
替换node-sass为dart-sass
来了波，兄嘚
01-07 8375
选择dart-sass的理由 官网 1.Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。 2. 在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖 libsass，导致很多用户安装的特别的困难，尤其是 windows
vue-element-admin中node-sass换成dart-sass，安装依赖报code 128等问题
weixin_44690156的博客
06-16 1260
在使用vue-element-admin这个后台管理框架中，安装依赖的时候或多或少都会遇见一些问题，其中最常见的莫过于下图这个！ 这是因为node-sass在windows环境中必须安装python2和Visual Studio才能编译成功。由此可见这个问题多么的。。。现在可以通过把node-sass换成dart-sass来解决这个问题，更换的方式也非常简单。 但是有一点需要注意的是，替换 node-sass 之后就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的
node-sass 4.12、4.14.1、5 node-sass-loader node_modules 安装包
07-07
Sass-Loader是Webpack的一个加载器，用于将Sass或Scss文件转换为CSS。当Webpack遇到Sass文件时，Sass-Loader会先调用Node-Sass将Sass编译成CSS，然后可能再经过其他CSS处理加载器（如CSS-Loader、Mini-CSS-Extract-...
node-sass安装包
10-23
这会将Node-Sass添加为项目的开发依赖，并将其写入package.json文件。安装完成后，你可以在你的JavaScript代码中引入node-sass模块，如下所示： ```javascript const sass = require('node-sass'); ``` **编译Sass...
完美解决node-sass@4.14.1 postinstall: `node scripts/build.js` 问题
09-01
另外，社区中还有一些解决方案是通过使用预编译的二进制版本替代本地编译过程，或者使用其他工具，如sass-loader和dart-sass，后者是node-sass的一个替代品，它不依赖于本地代码并且能够提供更好的兼容性。...
node-sass升级为dart-sass
风烟
08-02 3517
卸载node-sass npm uninstall node-sass 安装dart-sass npm install sass sass-loader -D 在选择dart-sass版本的时候建议低一些，我一开始比较高"sass": "^1.32.13",，导致我报错，因为我的除法使用的是/写法$num / 200，这样就会报错。 Recommendation: math.div($num, 200) More info and automated migrator: https://sass-la
node-sass@4.14.1 包含风险， 如何升级依赖至 dart-sass
wuyujin1997的博客
02-18 2288
我的选择是看公司的部署系统里用什么版本的 node 和 npm ，然后在本地也用接近的版本去测试(尽量减小环境上的变量影响)。我用了本地macOS机器和远程连接的windows环境安装测试，其中的 nodejs 版本是不同的，报错结果也有区别。之后：往后对于sass语法的支持，就由我dart-sass这个后来者一家撑着。，名称更短，听起来也更官方(提供对sass语法支持的插件，插件名就叫sass，这多官方啊)。所以，这一条不能帮我解决最终的问题，不过可以堵死一条路的可能性。这个有风险的依赖版本给撤下去。
node-sass 改为sass 内部文档
weixin_43187898的博客
03-07 1548
node-sass 升级为sass。
webpack 老项目升级记录：从 node-sass 限制的的 node v8 提升至支持 ^node v22
Lovely Ruby 的手账
10-21 1747
技术框架。
vue2老项目中node-sass更换dart-sass
csl125的博客
07-25 2654
安装dart-sas sass-loader 推荐安装sass@1.26.2 sass-loader@7.3.1。更换原因：node-sass经常会出现node版本问题，就很麻烦。卸载项目中的node-sass sass-loader。如果使用了stylelint，需要修改配置规则。然后需要全局替换一下/deep/，全局搜索。从新配置vue.config.js。
前端 | Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue
精品推荐，你我共享
10-01 740
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。目前vue-cli在选择。
node-sass 替换为 sass
weixin_41223575的博客
01-14 5892
node-sass 替换为 sass
node-sass已弃用了，升级sass-loader
qq_38935512的博客
09-15 4710
官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。而且经常会因为node-sass 和 loader-sass 版本不一样会出现不同的问题，所以直接启用。sass-loader V7版本是基于node-sass的，源码中有一个loader.js中引用了node-sass，所有需要升级到v8版本。放弃node-sass 直接安装sass sass-loader，可以用以下版本。升级之后一些sass 写法需要修改。
Vue CLI2 项目 node-sass切换为dart-sass
06-06
您可以按照以下步骤将 Vue CLI2 项目中的 node-sass 切换为 dart-sass： 1. 首先，使用 npm 安装 `sass-loader` 和 `sass`： ``` npm install sass-loader sass --save-dev ``` 2. 打开 `webpack.base.conf.js` 文件，找到 `cssLoaders` 方法。 3. 找到 `sass-loader` 配置，将 `node-sass` 改为 `sass`，并删除 `indentedSyntax: true`。配置如下： ```js { loader: 'sass-loader', options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), }, }, }, ``` 4. 保存文件并重新启动项目，现在您已经成功将 node-sass 切换为 dart-sass。 注意：以上步骤仅适用于 Vue CLI2 项目，Vue CLI3 已经使用 dart-sass 作为默认的 CSS 预处理器。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值