Webpack打包CSS出现:local问题及生产环境样式失效求助

问题2：生产环境:global 样式消失的解决方案 #

你遇到的生产环境样式消失问题，主要和CSS Modules的局部作用域处理以及你自定义的getLocalIdent逻辑有关，结合你的Webpack配置，给出以下分步解决方案：

1. 正确声明全局动画（从根源避免问题） #

与其在使用动画时加:global，不如直接把动画本身声明为全局作用域，这样css-loader就不会对其做局部转换：

/* 在你的pcss文件中 */
:global(@keyframes spinner) {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这样打包后动画名就是全局的spinner，无需在使用时额外加:global。

2. 修复生产环境getLocalIdent的逻辑问题 #

你的生产环境css-loader配置了自定义的getLocalIdent函数，用于生成类名，但这个函数没有区分全局作用域和局部作用域的类名，导致:global标记的类名也被强制转换成了随机名，甚至可能被css-loader判定为“未使用”而移除。

修改生产环境的getLocalIdent函数，对需要保留原名的全局类名（比如你的.i-spinner4）直接返回原类名：

getLocalIdent: (loaderContext, localIdentName, localName, options) => {
  // 保留全局类名或特定前缀的类名（比如i-开头的图标类）
  if (localName.startsWith('i-')) {
    return localName;
  }
  // 原有随机命名逻辑
  var randName = randomNaming(3,2);
  if (typeof cache[localName] == 'undefined') {
    cache[localName] = randName;
    return cache[localName];
  } else {
    return cache[localName];
  }
}

这样.i-spinner4会被保留原类名，不会被随机替换，同时:global标记的样式也不会被误处理。

3. 确保样式被Webpack识别为“已使用” #

如果你的全局样式是直接在HTML中使用（而非通过JS引入的模块类名），css-loader可能会在生产环境的tree-shaking过程中把它判定为“未使用”而移除。解决方法是：

• 在你的JS入口文件中，显式引入包含该全局样式的pcss文件：

// 比如在index.js中
import './path/to/your/spinner-style.pcss';

这样Webpack会识别到该样式被引用，不会在打包时丢弃。

4. 排查PostCSS插件的影响 #

虽然你注释了postcss-csso，但可以临时排查其他PostCSS插件是否导致样式被移除：

• 暂时注释掉postcss-nested、postcss-cssnext等插件，重新打包生产环境，看样式是否恢复。如果恢复了，再逐个排查是哪个插件的问题，调整对应的插件配置。

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