Node sass 切换成Dart Sass

最新推荐文章于 2025-10-10 09:37:34 发布
原创 最新推荐文章于 2025-10-10 09:37:34 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sass #vue.js #css

在安装了Sass之后，如果sass-loader版本过高可能会遇到`SyntaxError: TypeError: this.getOptions is not a function`的错误。为避免此问题，建议将`sass-loader`版本限制为`^7.1.0`，同时保持`sass`版本为`^1.49.9`。这样可以确保兼容性并正常运行项目。

参照：链接

注意：安装了sass后，sass-laoder的版本不能太高，否则会报
Syntax Error: TypeError: this.getOptions is not a function

我的版本对应关系如下：
“sass”: “^1.49.9”,
“sass-loader”: “^7.1.0”,

vue中把node-sass换成dart-sass方式（解决办法）
快乐学习
02-22 5325
因为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的区别。
Vue：Node Sass VS. Dart Sass
彭世瑜的博客
04-14 1578
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 2868
SCSS 预处理器切换到dart-sass后，需要重点检查以下“旧语法”直接使用$a + $b等数学运算时，必须改为#{}插值或使用模块。大量依赖过时的@import语法可暂时保留，但建议逐步迁移到@use@forward模块化写法。若项目中频繁使用.sass缩进语法，需要确保缩进、空格、分号完全正确，以免 Dart Sass 报错。检查自定义函数、第三方库是否在 Dart Sass 中存在内置函数冲突或 API 差异，如有必要手动升级或改写。
vue-element-admin中node-sass换成dart-sass，安装依赖报code 128等问题
weixin_44690156的博客
06-16 1293
在使用vue-element-admin这个后台管理框架中，安装依赖的时候或多或少都会遇见一些问题，其中最常见的莫过于下图这个！ 这是因为node-sass在windows环境中必须安装python2和Visual Studio才能编译成功。由此可见这个问题多么的。。。现在可以通过把node-sass换成dart-sass来解决这个问题，更换的方式也非常简单。 但是有一点需要注意的是，替换 node-sass 之后就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的
【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
最新发布
乌昂王
10-10 4638
HBuilderX4.56+版本中，vue2项目将默认使用dart-sass替代已停维的node-sass。由于node-sass不支持ARM架构且语法过时，可能导致老项目在升级或使用M系列CPU时编译报错。建议开发者升级至vue3（默认dart-sass）或修改语法（如将/deep/替换为::v-deep）。如需继续使用node-sass，可在manifest.json中配置"sassImplementationName":"node-sass"。
node-sass 替换为 sass
weixin_41223575的博客
01-14 6495
node-sass 替换为 sass
vue2老项目中node-sass更换dart-sass
csl125的博客
07-25 3556
安装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-cli 3中dart-sass替换node-sass
github_38894454的博客
06-06 5082
vue-cli 3中dart-sass替换node-sass 在使用 node-sass 过程中我们经常会遇到很多问题，不同平台上有各种各样的问题，python版本的问题，node-gyp的问题，node.js的版本问题等等，甚至因为国内网络的问题等等，所以官方现在推荐用dart-sass来作为编译器，在实际操作中发现dart-sass基本没什么坑 ，但是因为项目用的是vue-cli3初始化的vue项目，选用了node-sass，导致不管是部署还是多人开发都遇到了多多少少的问题； 下面是官方的一段话：
前端 | Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue
精品推荐，你我共享
10-01 968
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。目前vue-cli在选择。
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` ...
sass 因为 node 版本导致项目报错, nvm 切换终极使用方案
qq_42033430的博客
08-17 296
想到的方法是通过 nvm 来进行 node 版本管理, 可是这样, 每次都要去 nvm use 一下, 实属麻烦, 有的时候可能会因为忘记 use 一下, 导致项目启了半天, 最后来个报错. 人都傻了.想着可能是 nvm 切换的时候, 可能还没切换成功, 就执行了 npm, 所有准备搞个定时器, 搜索相关 bat 脚本的定时器语句.为此, 搜寻了相关博客. 如下解决方案, 也想到了先 nvm use 一下, 然后再启动项目, 可是会出现报错问题.
【系统学习css】scss和sass以及 less的关系，node-sass、dart-sass和sass-loader是啥
有一棵树的博客
05-11 2429
每日鸡汤，每一个想要学习的念头都是未来的你向自己求救 首先我们在package.json中安装的依赖都是关于sass的，但是在style标签中使用的时候一般是用<style lang="scss> 这是为什么呢，我们来看一下sass和scss的关系。 参考链接 sass和scss其实是一样的css预处理语言，scss是sass 3引入的新语法，所以就是说scss隶属于sass，scss语法完全兼容了css3, 并且继承了sass的强大功能。 区别是 sass 是有严格缩进风格的，不
踩坑node-sass和sass-loader
qq_32302511的博客
01-07 1375
创建vue新项目时，选择了node-sass作为css预处理，但是在出现报错； 经过查询后发现是node-sass版本问题，node-sass和sass-loader需要版本对应才可以使用； 后来直接放弃使用node-sass； 更换为dart-sass它比node-sass更好，编译速度更快，下载比node-sass更快； 在创建项目时，直接选择dart-sass，项目创建时会自动匹配一个sass-loader版本对应，切项目可以启动不会出现报错。 如果还在纠结node-sass版本，何不弃用，
将node-sass升级为dart-sass，踩坑实录
weixin_44466651的博客
10-13 8159
首先将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 在.
node-sass升级为dart-sass
风烟
08-02 3582
卸载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
Vue组件库必备 Sass(Dart) 知识
前端攻城狮
08-14 5683
Dart Sass 是Sass 的主要实现版本，这意味着它集成新功能要早于任何其它的实现版本。 Dart Sass 速度快、易于安装，并且可以被编译成纯JavaScript 代码，这使得它很容易集成到
你还在为node-sass烦恼吗？快试试官方推荐的dart-sass
04-07 745
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
dart-sass和node-sass的区别，使用dart-sass后可能会出现的问题
qq_38687592的博客
10-09 2275
2020 年 10 月 27 日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。如果在 vue 脚手架搭建的项目中需要使用 sass，建议初始化时勾选 sass 配置，自行安装，选择默认的就是 dart-sass。dart-sass 替代 node-sass 根本原因：node-sass 无法下载特定版本的二进制依赖文件（博主没有深入研究）dart-sass 使用前需要注意几点：
sass/scss基础使用（node|dart-sass区别、安装、搭配VScode的Easy Sass使用、基础语法、变量$、插值#{}、嵌套、父元素&、静默注释、数学运算、循环、混合、继承、函数）
AIWWY的博客
10-05 3728
目录 Sass|Scss介绍 版本（node|dart-sass） 区别 安装 搭配VScode使用 Easy Sass 注意 设置 常见报错 Scss(Sass)基础语法 变量 插值（#{}） 嵌套 伪类、伪元素|父元素表示（&） 静默注释 数学运算 random() round(x) floor(x) ceil(x) max(x1,x2,...,xn) min(x1,x2,...,xn) 循环 混合（@mixin） 混合参数 条件判断（@i..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值