TSDX配合postcss打包时@import未生成在CSS文件顶部问题求助

问题根源 #

你配置的postcss-import未生效是因为rollup-plugin-postcss默认开启了内置的@import解析逻辑，优先级高于你传入的postcss插件，导致自定义的atImport没有执行；另外cssnano的默认优化规则也可能调整@import的位置，触发浏览器警告。

修复后的完整配置 #

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const atImport = require("postcss-import");

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        // 关闭内置的@import解析，让自定义的postcss-import生效
        postcssImport: false,
        plugins: [
          atImport(),
          autoprefixer(),
          cssnano({
            preset: ['default', {
              // 禁用删除/移动@import语句的优化规则
              discardImports: false,
              // 禁用CSS声明排序，避免打乱引入顺序
              cssDeclarationSorter: false
            }],
          }),
        ],
        // 不需要单独输出CSS、需要JS自动注入样式的场景可以保留inject: true
        inject: false,
        // 仅为第一个包输出CSS（避免生成无意义的重复文件）：
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

补充注意事项 #

• 所有@import语句必须放在单个CSS文件的最顶部，不能出现在普通CSS规则之后，否则postcss-import不会处理
• 如果修改配置后仍有问题，可以先注释掉cssnano插件，排查是不是压缩规则导致的顺序异常
• 多入口组件库场景下，建议将全局公共的@import统一写在全局入口CSS文件中，避免重复引入

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