TSDX项目引入.css文件报错postcss-modules需要PostCSS 8如何处理

报错根因 #

TSDX内置依赖的PostCSS版本为7.x，而新版postcss-modules默认仅支持PostCSS 8及以上版本，依赖版本不匹配触发报错。

解决方法 #

方案1：降级postcss-modules到兼容PostCSS7的版本，操作成本最低 #

• 卸载现有高版本postcss-modules：
  npm uninstall postcss-modules 或 yarn remove postcss-modules
• 安装兼容PostCSS7的最高版本postcss-modules：
  npm install postcss-modules@4.3.1 -D 或 yarn add postcss-modules@4.3.1 -D
  注：4.3.1是postcss-modules支持PostCSS7的最后一个稳定版本，无需修改其他配置即可正常运行

方案2：显式指定使用PostCSS8，适合需要使用新版PostCSS生态插件的场景 #

• 首先安装PostCSS8及最新版postcss-modules：
  npm install postcss@8 postcss-modules@latest -D 或 yarn add postcss@8 postcss-modules@latest -D
• 修改项目根目录下的tsdx.config.js配置，给rollup-postcss插件显式传入本地安装的PostCSS8实例，参考配置如下：

const postcss = require('rollup-plugin-postcss');
// 引入本地安装的PostCSS8实例
const localPostcss = require('postcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        // 替换默认内置的PostCSS7实例
        postcss: localPostcss,
        modules: true,
        // 按需配置其他postcss参数
        extract: !!options.writeMeta
      })
    );
    return config;
  }
};

验证生效 #

配置完成后删除node_modules/.cache目录清空缓存，再重新启动开发命令即可，避免旧缓存导致报错依然存在。

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