一、先搞懂：两者不是一回事！核心区别大公开

许多开发者混淆两者关系，实则它们是 Sass 的两种实现，底层逻辑天差地别（见下表）：

关键提醒：npm 上的dart-sass包已废弃，目前官方新版 Sass 直接叫sass包！

二、优缺点 PK：谁是 “坑王” 谁是 “真香之选”？

1. 新版 Sass（Dart Sass）：长期项目首选

✅ 优点：

• 安装零痛苦：纯 JS 实现，无需配置编译工具链，Windows/mac/Linux 全兼容
• 功能永新鲜：官方同步更新，支持 CSS 嵌套、自定义属性等前沿特性
• 生态适配强：sass-loader 10.x + 默认支持，Webpack/Vite 无缝集成
• 无版本绑定：升级 Node.js 不会引发编译失败

❌ 缺点：

• JS 版性能略逊：纯 JS 编译比 C++ 实现慢 10%-20%（Dart VM 版可弥补）
• 旧语法兼容差：直接用@import会报警告，需改@use

2. node-sass：遗留项目的 “麻烦制造者”

✅ 优点：

• 编译速度快：C++ 底层处理大型样式表比早期 JS 版快
• 历史生态全：老项目依赖的插件可能仅支持它

❌ 缺点（致命！）：

• 安装巨坑：依赖node-gyp，常出现 “二进制文件缺失”“Python 版本不匹配” 等错误
• 版本绑定死：Node 18 + 直接报 “不支持当前版本”，逼你降级 Node
• 安全隐患：停止维护后漏洞无人修，企业项目禁用
• 工具不兼容：sass-loader 10.x + 彻底抛弃它，升级就报错

三、最佳实践：3 步搞定选型与迁移

1. 新项目：无脑选新版 Sass

安装命令（二选一）：

# 纯JS版（跨平台首选）

npm install sass --save-dev

# Dart VM版（大型项目求性能）

npm install sass@dart --save-dev

基础配置（Webpack 示例）：

// webpack配置文件
module.exports = {
  // 模块规则配置
  module: {
    // 定义模块规则数组
    rules: [
      {
        // 匹配.scss文件
        test: /.scss$/
        // 使用的loader
        use: [
          // 将CSS插入到DOM中
          'style-loader',
          // 处理CSS文件
          'css-loader',
          // Sass编译器配置
          {
            loader: 'sass-loader',
            options: {
              // 明确指定使用新版Dart Sass而不是旧版Node Sass
              implementation: require('sass')
            }
          }
        ]
      }
    ]
  }
};

2. 旧项目迁移：4 步告别 node-sass

Step1：卸载旧依赖

npm uninstall node-sass --save-dev

Step2：安装新版 Sass

npm install sass --save-dev

Step3：修复语法兼容

• 把@import替换为@use（模块导入）：

// 旧：@import './variables';

// 新：@use './variables' as var;

.box { color: var.$primary; }

• 深度选择器/deep/改::v-deep（Vue 项目）：

// 旧：/deep/ .el-input { ... }

// 新：::v-deep .el-input { ... }

Step4：验证编译

运行npm run dev，若有警告按提示修改即可（一般是语法问题）。

3. 避坑技巧：这些 “坑” 早避开早省心

• ❌ 别用cnpm装 Sass：会导致二进制文件路径错乱，改用npm或yarn
• ✅ 大型项目加缓存：sass-loader配置cache: true，编译速度提升 50%
• ❌ 旧项目别硬升级：若依赖无法替换 node-sass，用nvm锁定 Node 16 版本
• ✅ 用sass-migrator自动迁移：

npx sass-migrator convert ./src --migrate-deps

四、总结：别再为旧工具浪费生命

Sass 官方早在 2020 年就宣布 node-sass 死刑，2025 年的今天，继续用它纯属给自己找罪受。新项目直接上新版 Sass，旧项目抓紧迁移 —— 毕竟解决一次安装问题的时间，够写 3 个组件了！