postcss.config.js是否支持MJS？MJS项目PostCSS配置函数未执行问题

我把webpack.config.js改成了MJS（ES模块），并通过以下配置加载自定义PostCSS文件：

{ 
  loader: 'postcss-loader', 
  options: { 
    postcssOptions: { 
      config: './webpack/custom-postcss-config.js', 
      colorMode: colorMode 
    } 
  } 
},

CJS格式的custom-postcss-config.js： #

// ...其他无关代码省略

console.log("postcss file used");

module.exports = (api) => {
  console.log("postcss function used");

  var colorMode = api.options.colorMode;
  
  return {
      plugins : [
          // ...其他插件省略
          ['postcss-custom-properties', { importFrom : `.....my ${colorMode} file.....`, preserve : false }],
          // ...其他插件省略
      ]
  }
};

MJS格式的custom-postcss-config.js： #

// ...其他无关代码省略

console.log("postcss file used");

export default (api) => {
  console.log("postcss function used");

  var colorMode = api.options.colorMode;
  
  return {
      plugins : [
          // ...其他插件省略
          ['postcss-custom-properties', { importFrom : `.....my ${colorMode} file.....`, preserve : false }],
          // ...其他插件省略
      ]
  }
};

现象 #

项目用CJS格式时，两个console.log都能正常执行，PostCSS也能正确处理CSS。但切换为MJS格式（package.json中设置type:module并完成对应文件修改）后，只有console.log("postcss file used")执行，console.log("postcss function used")没执行。控制台无报错，webpack编译成功，但最终CSS产物完全没经过PostCSS处理。

我用的都是各包的最新版本，知道之前postcss-loader和cosmiconfig有MJS支持问题，但近两年已经有修复提交了。

注：我把webpack配置和PostCSS配置都导出为函数，目的是传递亮色/暗色模式的参数。

1. 跳过config字段，直接传入配置函数 #

postcss-loader通过config加载MJS配置文件时，可能对默认导出的函数识别有问题。可以直接把配置逻辑移到webpack配置里，或者直接导入MJS配置函数：

// 先导入MJS配置函数
import postcssConfig from './webpack/custom-postcss-config.js';

// 修改webpack中的loader配置
{ 
  loader: 'postcss-loader', 
  options: { 
    postcssOptions: postcssConfig,
    colorMode: colorMode
  } 
},

2. 明确指定MJS文件名 #

给PostCSS配置文件改名为custom-postcss-config.mjs，然后在webpack中指定完整文件名，避免cosmiconfig用错误的解析方式处理：

{ 
  loader: 'postcss-loader', 
  options: { 
    postcssOptions: { 
      config: './webpack/custom-postcss-config.mjs', 
      colorMode: colorMode 
    } 
  } 
},

3. 检查参数传递是否正常 #

在MJS配置函数里打印api对象，确认参数是否传递到位：

export default (api) => {
  console.log('api对象:', api); // 查看是否能拿到colorMode
  console.log("postcss function used");

  var colorMode = api.options.colorMode;
  
  return { /* ...插件配置... */ }
};

如果api.options里没有colorMode，可以把参数移到options根节点传递：

// webpack配置
{ 
  loader: 'postcss-loader', 
  options: { 
    postcssOptions: { 
      config: './webpack/custom-postcss-config.mjs'
    },
    colorMode: colorMode // 移到根节点
  } 
},

// MJS配置文件
export default ({ options }) => {
  console.log("postcss function used");
  var colorMode = options.colorMode;
  // ...后续逻辑
};

4. 调整包版本 #

如果以上方法无效，可能是最新版本的兼容性问题：

• 回退postcss-loader到7.x版本（该版本对MJS支持更稳定）
• 确保cosmiconfig版本在8.2.0以上（此版本修复了MJS解析的部分问题）

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