如何在 ES 模块（.mjs）项目中正确配置 PostCSS 动态插件-js教程-PHP中文网

如何在 ES 模块（.mjs）项目中正确配置 PostCSS 动态插件

postcss 官方配置文件（如 postcss.config.js）不原生支持 es 模块语法，即使 cosmiconfig 和 postcss-loader 已添加 mjs 支持，动态函数导出仍可能失效；需改用显式导入 + 手动调用配置函数的方式实现参数化配置。

postcss 官方配置文件（如 postcss.config.js）不原生支持 es 模块语法，即使 cosmiconfig 和 postcss-loader 已添加 mjs 支持，动态函数导出仍可能失效；需改用显式导入 + 手动调用配置函数的方式实现参数化配置。

在基于 ES 模块（type: "module"）的现代 Webpack 项目中，直接通过 postcssOptions.config 指向 .mjs 配置文件（如 ./custom-postcss-config.js）无法触发其默认导出的函数执行——这是由 cosmiconfig 的加载机制决定的：它虽能识别 .mjs 文件，但对 ES 模块中 export default (api) => {...} 形式的函数导出缺乏运行时上下文（如 api.options），导致函数体未被调用，PostCSS 插件链完全失效，且无报错提示，极具隐蔽性。

✅ 正确解法是绕过自动配置发现机制，改为手动导入并立即调用配置函数：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

修改 Webpack 配置（.mjs）
显式导入配置模块，并传入运行时参数（如 colorMode）：

// webpack.config.mjs
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',
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: CustomPostcssConfig(colorMode), // ✅ 直接调用，返回配置对象
            },
          },
        ],
      }],
    },
  };
};

重构 PostCSS 配置文件（custom-postcss-config.js，保持 .js 后缀但使用 ESM 语法）
移除对 api 参数的依赖，直接接收业务参数（如 colorMode），返回标准 PostCSS 配置对象：

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

export default (colorMode) => {
  console.log('postcss config function executed with mode:', colorMode);

  return {
    plugins: [
      'postcss-flexbugs-fixes',
      ['@csstools/postcss-global-data', {
        files: [`./src/styles/variables.${colorMode}.css`], // ✅ 替代已废弃的 `importFrom`
        preserve: false,
      }],
      'autoprefixer',
    ],
  };
};

⚠️ 注意事项：

不要混用 postcssOptions.config 与 ESM 配置文件：config 字段仅适用于 CommonJS 风格的 postcss.config.cjs 或传统 postcss.config.js（含 module.exports），ESM 文件必须手动导入。
插件兼容性更新：postcss-custom-properties 已移除 importFrom 选项，推荐使用 @csstools/postcss-global-data 替代，功能更稳定且支持多文件导入。
文件后缀建议：尽管使用 ESM 语法，仍建议将配置文件命名为 .js（而非 .mjs），避免部分工具链（如某些 IDE 或旧版 Node）解析异常；只要 package.json 中声明 "type": "module"，Node 就会按 ESM 解析。
调试技巧：在配置函数首行添加 console.log 是验证其是否执行的最有效方式——若只看到“file imported”而无“function executed”，说明调用路径有误。

通过该方案，你既能享受 ESM 的静态分析与 tree-shaking 优势，又能灵活传递构建参数（如主题模式），确保 PostCSS 插件链在开发与生产环境均可靠生效。