dart-sass替代node-sass区别：fix Node Sass一切问题(系统不支持/gyp

现在很多人选择dart-sass 取代 node-sass。之前本站也推荐过 sass-js：sass安装：webpack sass编译失败，node-sass安装失败的终极解决方

今天一个老项又存在这个这个问题：

Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (57)

gooogle到的链接：https://stackoverflow.com/questions/64612707/node-sass-does-not-yet-support-your-current-environment-windows-64-bit-with-uns

其实，是因为nodejs 版本过高，建议把nodejs切换值14.x版本

但是还是会出现 gyp 等一些列问题

所以一直建议大家放弃dart-sass

选择dart-sass的理由

1. sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass            能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。

2. 在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖            libsass，导致很多用户安装的特别的困难，尤其是windows用户，它强制用户在windows环境中必须安装python2和Visual            Studio才能编译成功。所以为了解决这个问题，本项目在v4.3.0修改为dart-sass进行构建，它能在保证性能的前提下大大简化用户的安装成本。通过这个issue下面相关的评论就可以知道，安装node-sass            是多么麻烦 一件事。

3. 这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了            ，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node            环境中使用。虽然这样它的运行速度会比基于 libsass的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。

不选择node-sass的理由：

1. node-sass在npm安装的时候大概率的会安装出错，或下载时间过长，因此考虑用dart-sass来替换

2. node-sass已经停止更新

node-sass与dart-sass区别

1. node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；

2. dart-sass 是用 drat VM 来编译 sass；

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

4. 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上.            如果选择node-sass，很大概率会遇到build失败的情况，因为安装过程中是需要拉二进制的包下来的，但是网络问题，这个包一般拉不下来，所以会导致后续的一系列报错

dart-sass存在的问题

The `/deep/` selector is not working using sass-loader in my VueJS application

https://github.com/vuejs/vue-cli/issues/3399

https://stackoverflow.com/questions/67356599/the-deep-selector-is-not-working-using-sass-loader-in-my-vuejs-application?rq=1

https://stackoverflow.com/questions/56150402/vue-cli-css-pre-processor-option-dart-sass-vs-node-sass

dart-sass 替换node-sass 操作步骤

卸载node-sass

第一种方式:  

在package.json中的node-sass删除掉  卸载完以后建议重新下包 安装依赖

第二种方式:

npm uninstall node-sass

安装 dart-sass

// npm

  npm install --dev sass 

配置 vue.config.js 文件

一般默认文件里是没有这个css配置的, 添加进去就好.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
 }

全局搜索 (/deep/ 和 >>>) 替换为::v-deep

• 如果vue3.0之前vue2.0你使用了/deep/ 没有替换 将会报错

• 如果控制台报下面的错误, 可能是 `sass-loader` 版过旧, 建议将版本更新到 `7.1.0 +`

• 项目中使用了stylelint , 可能需要修改下校验规则，在stylelint.config.js 代码如下
  

参考链接：

vue-cli4.X 中 选择sass时dart-sass 和node-sass有什么区别 https://blog.csdn.net/qq_22713201/article/details/118545699

转载本站文章《dart-sass替代node-sass区别：fix Node Sass一切问题(系统不支持/gyp》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2021_1111_8700.html