是否可以将Dart Sass命令行版本与webpack配合使用？

完全可以实现，不需要依赖npm安装的dart-sass包，且确实能大幅提升sass编译性能，以下是两种可直接落地的方案：

• 方案1：基于sass-loader配置自定义实现
  先在构建机器上完成dart-sass的安装配置，确认终端执行sass --version可正常输出版本信息。之后修改webpack的css相关规则配置，给sass-loader传入自定义调用逻辑，直接唤起系统的dart-sass命令完成编译：

  // webpack.config.js 相关配置示例
  const { execSync } = require('child_process');
  module.exports = {
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                implementation: function(sassFile, options, callback) {
                  // 调用系统dart-sass命令编译
                  const css = execSync(`sass ${sassFile}`, { encoding: 'utf8' });
                  callback(null, { css });
                }
              }
            }
          ]
        }
      ]
    }
  }
  

• 方案2：预编译sass文件后再走webpack构建
  如果你不想修改原有loader逻辑，可以使用webpack-shell-plugin-next插件，在webpack构建流程启动前先批量调用系统dart-sass命令，把所有sass文件提前编译为css文件，webpack直接处理编译完成的css即可，这种方式性能最优，完全复用命令行版本的编译效率。

注意事项

• 请确保构建机器的PATH环境变量包含dart-sass的可执行文件路径，避免执行时找不到命令
• 多节点构建场景下需要保证所有构建节点的dart-sass版本一致，避免出现编译结果差异

内容的提问来源于stack exchange，提问作者AnandShiva