Dart项目中Sass与Autoprefixer协同使用问题求助

我之前在Windows 10环境下处理过类似的Dart转换器协同问题，结合你的配置和报错情况，给你几个针对性的解决方案：

一、排查并修复现有转换器配置 #

你的当前配置顺序是对的（先Sass编译，再PostCSS处理），但可能缺少关键的文件匹配配置，或者Windows路径识别有问题：

1. 明确PostCSS的处理文件类型 #

修改pubspec.yaml中的postcss_transformer配置，添加input_extensions指定处理CSS文件，确保它能识别Sass生成的输出：

transformers:
  - dart_to_js_script_rewriter
  - sass_builder
  - postcss_transformer:
      input_extensions: [.css]
      arguments:
        - use: autoprefixer
        - autoprefixer.browsers: '> 1%'

2. 指定PostCSS可执行文件路径（Windows专属） #

Windows下如果全局安装的PostCSS不在系统默认PATH里，转换器可能找不到它。可以手动指定executable路径（替换成你的实际npm全局路径）：

transformers:
  - dart_to_js_script_rewriter
  - sass_builder
  - postcss_transformer:
      input_extensions: [.css]
      executable: C:\Users\YourUsername\AppData\Roaming\npm\postcss.cmd
      arguments:
        - use: autoprefixer
        - autoprefixer.browsers: '> 1%'

你可以通过在命令行输入where postcss来获取正确的路径。

二、切换到现代Build Runner工具链 #

旧的transformers系统在Windows下兼容性一般，推荐使用Dart官方的build_runner生态，适配性更好：

1. 更新依赖配置 #

替换pubspec.yaml中的dev依赖和transformers：

dependencies:
  # 保留你的业务依赖
dev_dependencies:
  build_runner: ^2.4.0
  build_web_compilers: ^4.0.0
  sass_builder: ^2.2.0
  postcss_builder: ^2.1.0

2. 创建Build配置文件 #

在项目根目录新建build.yaml，配置Sass编译和PostCSS自动前缀：

targets:
  $default:
    builders:
      sass_builder|sass_builder:
        enabled: true
        options:
          output_style: expanded # 可选compressed用于生产环境
      postcss_builder|postcss_builder:
        enabled: true
        options:
          plugins:
            - name: autoprefixer
              options:
                overrideBrowserslist: '> 1%'

3. 执行构建 #

• 开发时监听文件变化：dart run build_runner watch --delete-conflicting-outputs
• 生产构建：dart run build_runner build --release --delete-conflicting-outputs

三、手动处理方案（应急用） #

如果上面的方案都不生效，可以拆分步骤手动完成：

1. 保留pubspec.yaml中的sass_builder，执行pub build web生成未加前缀的CSS到build/web目录
2. 在项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: '> 1%'
    })
  ]
}

3. 执行命令批量处理CSS：postcss build/web/**/*.css -d build/web/

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