vue中把node-sass换成dart-sass方式（解决办法）

最新推荐文章于 2025-10-10 09:37:34 发布
最新推荐文章于 2025-10-10 09:37:34 发布
阅读量5.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # 前端Bug Bug大全解决 文章标签： vue.js sass javascript node.js dart-sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52861000/article/details/129161973
本文介绍了在vue项目中将node-sass替换为dart-sass的原因，如版本兼容问题，以及dart-sass与node-sass的主要区别，包括dart-sass的优点和缺点。并详细阐述了如何进行替换操作，包括卸载node-sass和安装dart-sass的步骤。

目录

一、替换原因

二、art-sass和node-sass的区别

三、替换方法

一、替换原因

因为node-sass和node.js版本关联太紧了，如果这两个版本不匹配，就会起冲突，导致项目无法运行。

ps：值得一提的是node版本和要运行的项目使用的依赖版本相差太大也会导致运行失败，这就需要降低node版本了

二、art-sass和node-sass的区别

 node-sass是实时编译的，dart-sass是需要保存后才会生效

dart-sass的优点：

（1）可以使用sass和css新特性

（2）避免项目以及其他的依赖升级node-sass导致不兼容问题

（3）不存在二进制文件安装，避免了nod

了解本专栏 订阅专栏 解锁全文
Vue：Node Sass VS. Dart Sass
彭世瑜的博客
04-14 1542
Node Sass VS. Dart Sass 建议替换 Node Sass -> Dart Sass npm uninstall node-sass npm install sass -S -D node-sass 写法 .a { /deep/ { .b { color: red; } } } dart-sass 写法 .a { ::v-deep { .b { color: red; } } } 兼容性 ::v-deep
Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题
每天都要努力学习哦~~
05-29 2650
SCSS 预处理器切换到dart-sass后，需要重点检查以下“旧语法”直接使用$a + $b等数学运算时，必须改为#{}插值或使用模块。大量依赖过时的@import语法可暂时保留，但建议逐步迁移到@use@forward模块化写法。若项目中频繁使用.sass缩进语法，需要确保缩进、空格、分号完全正确，以免 Dart Sass 报错。检查自定义函数、第三方库是否在 Dart Sass 中存在内置函数冲突或 API 差异，如有必要手动升级或改写。
将node-sass升级为dart-sass，踩坑实录
weixin_44466651的博客
10-13 8086
首先将node-sass卸载npm uninstall node-sass 安装dart-sass 这里已经是踩坑第一步了，实际上不能理所当然的觉得是 npm install dart-sass ，因为虽然dart-sass名确实为dart-sass，但也是sass官方最开始为了区分node-sass来作出的一个命名，而后node-sass就已经被完全弃用，因而dart-sass也被弃用，统一使用sass来作为dart-sass。 因此，此步正确做法如下npm install sass -D 在.
HBuilderX升级，Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
前进者
08-20 1013
HBuilderX4.75版本将Vue2项目的scss预编译器从node-sass更换为dart-sass，导致旧语法不兼容。解决方案：1）在manifest.json中配置"sassImplementationName":"node-sass"继续使用node-sass；2）按文档修改为dart-sass支持的语法。官方文档提供了两种解决方法的详细说明。
前端 | Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue
精品推荐，你我共享
10-01 899
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。目前vue-cli在选择。
Vue2 项目scss预编译器默认改用dart-sass导致编译报错问题解决
weixin_61697862的博客
03-18 940
一段时间没做uniapp了，今天维护其它项目时发现在本地部署后HbuilderX运行到微信小程序一片红，于是立刻更新了编辑器，更新编辑器后发现更新说明的变化又去查看uniapp官方文档，现在边写边解决。
vue2老项目中node-sass更换dart-sass
csl125的博客
07-25 3494
安装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。
替换node-sass为dart-sass
来了波，兄嘚
01-07 8598
选择dart-sass的理由 官网 1.Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。 2. 在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖 libsass，导致很多用户安装的特别的困难，尤其是 windows
vue项目：Node Sass to Dart Sass
snow的博客
12-21 917
一、我为什么要换Dart-Sass： 我node版本升级后发现node-sass不支持了，于是我启动了心动已久的计划，卸载Node Sass 投奔Dart Sass。 报错如图： 二、主流的声音怎么说： 在v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖libsass，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。 所以为了解决这个问题，..
vue-element-admin中node-sass换成dart-sass，安装依赖报code 128等问题
weixin_44690156的博客
06-16 1284
在使用vue-element-admin这个后台管理框架中，安装依赖的时候或多或少都会遇见一些问题，其中最常见的莫过于下图这个！ 这是因为node-sass在windows环境中必须安装python2和Visual Studio才能编译成功。由此可见这个问题多么的。。。现在可以通过把node-sass换成dart-sass来解决这个问题，更换的方式也非常简单。 但是有一点需要注意的是，替换 node-sass 之后就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的
node-sass改为sass(dart-sass)
咕咚在否的博客
04-08 2232
npm uninstall node-sass npm install --dev sass 搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep
【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
最新发布
乌昂王
10-10 4353
node-sass升级dart-sass常见问题及改进方法
Scss--将node-sass切换为sass(原dart-sass)
日常分享
05-15 1012
原文网址：Scss--将node-sass切换为sass(原dart-sass)_IT利刃出鞘的博客-CSDN博客
node-sass安装太难，替换为dart-sass
qq_19338761的博客
08-13 2837
node-sass简直就是噩梦，太难安装了，还各种nodejs版本问题，有的时候几天都装不好 替换为dart-sass后，好多了，但是有部分语法还是有细微区别的 vue项目用dart-sass替换node-sass很简单 先删除项目中node-sass yarn remove node-sass 再安装dart-sass yarn add sass -D 将项目中sass的，/deep/修改为 ::v-deep /* 修改前 */ .a { /deep/ { .b {
node-sass升级为dart-sass
风烟
08-02 3575
卸载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
hbuilderX报错 Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题。
风花一世月
06-10 436
方案2：如果您希望继续使用node-sass，您可以在 manifest.json 中配置 "sassImplementationName": "node-sass"，详情：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor。直接给manifest.json添加"sassImplementationName" : "node-sass",更新最新版本hbuilderX报错。
用sass替代node-sass
包子大叔的笔记
03-24 5902
node-sass很难安装, 经常安装失败, 安装报错, 解决方案, 替代方案如下 亲测有效 , 按这个我从一个老的Vue2的项目中去掉了node-sass
vue-cli 3中dart-sass替换node-sass
黄彪博客
04-29 2503
文章目录一、问题描述1.1 nodejs12 升级 nodejs161.2 将node-sass改为 dart-sass二、dart-sass VS. node-sass2.1 node-sass2.1 将node-sass替换为dart-sass 一、问题描述 最近在学习Vue3，使用vue-cli4.x 创建的工程，在使用sass的时候，一直报错，提示API 不兼容。 1.1 nodejs12 升级 nodejs16 启动项目的时候，提示nodejs 版本过低，自己本机是nodejs12。 想着node
vue2.0 webpack node-sass 换成sass
07-25
在 Vue 2.0 项目中，若需将 `node-sass` 替换为 `sass`（即 `Dart Sass`），需对项目依赖和 Webpack 配置进行相应调整。以下是完整的替换步骤和配置方法。 ### 1. 卸载 `node-sass` 并安装 `sass` 首先，移除项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

云边的快乐猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值