如何在Rollup+PostCSS项目中保留第三方CSS类名不被哈希化？

下面给你几个可行的方案，都能在保留第三方CSS类名的同时，不影响本地样式的模块化哈希处理：

方案1：通过globalModulePaths指定全局CSS文件 #

在Rollup的PostCSS配置中，给postcss-modules添加globalModulePaths规则，匹配第三方CSS文件的路径，让这些文件跳过模块化哈希处理。

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  // 其他Rollup配置...
  plugins: [
    postcss({
      modules: {
        // 用正则匹配Codemirror的所有CSS文件
        globalModulePaths: [/codemirror\/.*\.css$/]
      },
      extract: true, // 将样式提取到单独的CSS文件（推荐）
      minimize: true // 可选：压缩CSS
    })
  ]
};

这样配置后，本地的.name这类样式依然会被处理成name_[hash]，但Codemirror的.Codemirror类名会保持原样，样式就能正常生效。

方案2：拆分PostCSS配置，分别处理本地和第三方样式 #

用两个PostCSS插件实例，一个专门处理本地需要模块化的CSS，另一个处理第三方全局CSS，关闭模块化功能。

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  // 其他Rollup配置...
  plugins: [
    // 处理本地模块化CSS
    postcss({
      include: 'src/**/*.css', // 只匹配本地源码里的CSS
      modules: true,
      extract: true
    }),
    // 处理第三方全局CSS
    postcss({
      include: 'node_modules/codemirror/**/*.css', // 匹配Codemirror的CSS
      modules: false, // 关闭模块化，保留原始类名
      extract: true // 可以合并到同一个CSS文件，也可单独指定输出路径
    })
  ]
};

这种方式逻辑更清晰，适合需要区分多种类型样式文件的场景。

方案3：修复:global包裹@import的写法 #

你之前尝试的:global包裹@import无效，大概率是PostCSS插件的执行顺序问题。确保postcss-import先于postcss-modules执行，这样@import解析后的内容会被正确标记为全局。

首先安装postcss-import：

npm install postcss-import --save-dev

然后配置PostCSS插件顺序：

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      modules: true,
      plugins: [
        require('postcss-import')(), // 先解析@import
        require('postcss-modules')() // 再处理模块化
      ],
      extract: true
    })
  ]
};

然后在你的样式文件里这样写：

/* 本地模块化样式 */
.name {
  color: #333;
}

/* 全局引入Codemirror CSS */
:global {
  @import 'codemirror/lib/codemirror.css';
}

这样就能让Codemirror的样式类名保持全局不被哈希化。

注意事项 #

• 不要在render函数里用require引入第三方CSS，这会把CSS打包进JS，还会强制类库使用者安装Codemirror依赖，不符合类库的发布规范。
• 推荐使用extract: true将样式提取到单独的CSS文件，类库使用者可以自行引入这个CSS文件，或者你在类库的入口文件里通过import './your-bundle.css'的方式注入（但要确保使用者的构建工具能处理CSS导入）。

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