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

最新推荐文章于 2024-07-25 11:37:56 发布
最新推荐文章于 2024-07-25 11:37:56 发布
阅读量2.4k 收藏
点赞数
分类专栏： # 前端Bug Bug大全解决 文章标签： vue.js sass javascript node.js dart-sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52861000/article/details/129161973
版权
Bug大全解决 同时被 2 个专栏收录
40 篇文章 189 订阅 ¥9.90 ¥99.00
订阅专栏
前端Bug
16 篇文章 3 订阅
订阅专栏
本文介绍了在vue项目中将node-sass替换为dart-sass的原因，如版本兼容问题，以及dart-sass与node-sass的主要区别，包括dart-sass的优点和缺点。并详细阐述了如何进行替换操作，包括卸载node-sass和安装dart-sass的步骤。
摘要由CSDN通过智能技术生成

目录

一、替换原因

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

三、替换方法

一、替换原因

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

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

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

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

dart-sass的优点：

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

了解本专栏 订阅专栏 解锁全文
云边的快乐猫
关注
专栏目录
订阅专栏
Vue：Node Sass VS. Dart Sass
彭世瑜的博客
04-14 1313
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
将node-sass升级为dart-sass，踩坑实录
weixin_44466651的博客
10-13 7149
首先将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 在.
vue项目：Node Sass to Dart Sass
snowball的博客
12-21 722
一、我为什么要换Dart-Sass： 我node版本升级后发现node-sass不支持了，于是我启动了心动已久的计划，卸载Node Sass 投奔Dart Sass。 报错如图： 二、主流的声音怎么说： 在v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖libsass，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。 所以为了解决这个问题，..
vue2老项目中node-sass更换dart-sass
最新发布
csl125的博客
07-25 886
安装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 568
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。目前vue-cli在选择。
替换node-sass为dart-sass
来了波，兄嘚
01-07 7991
选择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 1196
在使用vue-element-admin这个后台管理框架中，安装依赖的时候或多或少都会遇见一些问题，其中最常见的莫过于下图这个！ 这是因为node-sass在windows环境中必须安装python2和Visual Studio才能编译成功。由此可见这个问题多么的。。。现在可以通过把node-sass换成dart-sass来解决这个问题，更换的方式也非常简单。 但是有一点需要注意的是，替换 node-sass 之后就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的
vue-cli 3中dart-sass替换node-sass
前端小99的博客
03-23 2757
Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代！使用dart-sass代替node-sass，不管你是否使用dart-sass，建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法 而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃 使用方法 为什么要替换? node-sass仓库在墙外, 且新特性都会先在dart-sass实现 怎么替换?
Scss--将node-sass切换为sass(原dart-sass)
日常分享
05-15 718
原文网址：Scss--将node-sass切换为sass(原dart-sass)_IT利刃出鞘的博客-CSDN博客
解决node-sass偶尔安装失败的方法小结
10-17
在开发JavaScript应用时，我们经常会使用到`node-sass`这个库，它是一个将Sass编译成CSS的工具，基于Google的dart-sass。然而，`node-sass`的安装过程中有时会出现问题，特别是在更新或升级Node.js版本后。本篇文章...
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` ...
node-sass升级为dart-sass
风烟
08-02 3420
卸载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
用sass替代node-sass
包子大叔的笔记
03-24 3515
node-sass很难安装, 经常安装失败, 安装报错, 解决方案, 替代方案如下 亲测有效 , 按这个我从一个老的Vue2的项目中去掉了node-sass
vue-cli 3中dart-sass替换node-sass，element ui icon图标乱码问题
拿回忆下酒
11-28 1123
使用dart-sass ，element icon图标乱码问题
sass-loader 和 node-sass 替换成sass解决冲突问题
jiudenggushijingguo的博客
03-07 1307
sass-loader node-sass版本问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

云边的快乐猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值