如何在 ES 模块（MJS）项目中正确配置 PostCSS（支持动态参数传递）-js教程-PHP中文网

如何在 es 模块（mjs）项目中正确配置 postcss（支持动态参数传递）

在 Webpack 的 ESM（type="module"）项目中，postcss-loader 默认不自动加载 .mjs 格式的 PostCSS 配置文件；需手动导入并调用配置函数，而非依赖 config 路径自动解析，才能确保插件正常执行与参数（如主题模式）正确注入。

在 Webpack 的 ESM（type="module"）项目中，`postcss-loader` 默认不自动加载 `.mjs` 格式的 PostCSS 配置文件；需手动导入并调用配置函数，而非依赖 `config` 路径自动解析，才能确保插件正常执行与参数（如主题模式）正确注入。

PostCSS 在现代 ESM 项目中的配置常因模块系统差异而失效——尤其当 postcss-loader 的 options.postcssOptions.config 字段指向 .mjs 文件时，Cosmiconfig（postcss-loader 内部使用的配置发现工具）虽已支持 ESM，但仍无法正确解析导出为默认函数的动态配置（尤其是带 api.options 参数的旧式签名）。这导致配置函数未被调用（console.log("postcss function used") 不触发），PostCSS 插件静默失效，最终 CSS 未经过任何处理。

✅ 正确做法：绕过自动配置发现机制，改为手动导入 + 显式调用

在 webpack.config.js（ESM）中，直接导入你的 MJS 配置模块，并将运行结果传入 postcssOptions：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

// webpack.config.js
import CustomPostcssConfig from './webpack/custom-postcss-config.js';

export default (env, argv) => {
  const colorMode = argv.mode === 'production' ? 'dark' : 'light';

  return {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: CustomPostcssConfig(colorMode), // ✅ 直接传入配置对象
              },
            },
          ],
        },
      ],
    },
  };
};

对应地，custom-postcss-config.js 应适配为纯 ESM 函数导出，移除对 api.options 的依赖，直接接收运行时参数：

// ./webpack/custom-postcss-config.js
console.log('postcss file used');

export default (colorMode) => {
  console.log('postcss function used');

  return {
    plugins: [
      'postcss-flexbugs-fixes',
      'postcss-preset-env',
      [
        '@csstools/postcss-global-data', // ⚠️ 替代已废弃的 postcss-custom-properties importFrom
        {
          files: [`./src/styles/variables.${colorMode}.css`],
          preserve: false,
        },
      ],
      // 其他插件...
    ],
  };
};

? 关键注意事项：

不要使用 config: './path/to/config.mjs'：即使文件是 .mjs，postcss-loader + Cosmiconfig 在 ESM 上仍可能跳过函数执行或忽略 api 对象；
参数传递更清晰：将 colorMode 等上下文直接作为函数参数传入，比依赖 api.options 更可靠、类型友好且易于测试；
插件兼容性检查：如答案中指出，postcss-custom-properties 已不再维护 importFrom 选项，推荐迁移到 @csstools/postcss-global-data（功能等效且持续维护）；
确保 Node.js 版本 ≥ 14.13+：ESM 支持需较新 Node 版本，且 package.json 中必须声明 "type": "module"；
避免混合 CJS/ESM：若项目已启用 ESM，所有配置文件（包括 postcss.config.js 的替代品）均应统一为 .mjs 或 .js + "type": "module"，禁止混用 require() 或 module.exports。

通过手动导入与显式调用，你不仅解决了 ESM 下 PostCSS 配置不生效的问题，还获得了更强的类型提示、调试可见性与构建可预测性——这是现代 Webpack + PostCSS 工程化实践中的推荐范式。