CSS全局污染源于import本质是插入全局<link>，即使哈希类名也无法隔离作用域；真正模块化需运行时注入+作用域绑定，路径为CSS Modules或shadow DOM/:scope。
为什么 import CSS 文件仍会全局污染？
因为标准 import './style.css'（无论在 JS 还是 CSS 中）最终都等价于插入一个全局 <link rel="stylesheet">，所有选择器无条件进入全局作用域。哪怕用 postcss-modules 生成了哈希类名，只要没切断选择器的作用范围，.button 的原始定义仍可能被后续同名样式覆盖或干扰。
如何让 CSS 类真正“模块化”而非仅“重命名”？
核心是隔离作用域——不是靠文件拆分，而是靠运行时注入 + 作用域绑定。主流可行路径只有两条：
- 使用
CSS Modules（需构建工具支持）：把button.module.css中的.primary编译为Button_primary_abc123，再通过 JS 动态注入并返回映射对象，确保 JS 中className={styles.primary}指向唯一哈希名 - 改用
:scope或shadow DOM：在 Web Component 中启用mode: 'open'，其内部样式天然不泄漏；或对普通元素用element.attachShadow({mode: 'open'})后注入<style>，此时:host和:scope能限制选择器生效边界
注意：scoped（如 Vue 单文件组件中的 <style scoped>）本质是属性选择器模拟（.btn[data-v-f3f3eg9]），不等于作用域隔离——它仍依赖全局选择器匹配，且无法阻止外部样式通过更高级别权重穿透。
css-loader 的 modules 配置关键参数
Webpack 下启用 CSS Modules 不能只开 modules: true，否则默认行为会把所有 CSS 文件都模块化（包括你引入的第三方库样式）。应明确限定范围：
立即学习“前端免费学习笔记（深入）”；
module: {
rules: [
{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local', // 只对 .module.css 生效
auto: /\.module\.css$/i,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
}
}
]
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: ['style-loader', 'css-loader'] // 普通 CSS 不模块化
}
]
}
漏掉 exclude 或写错 auto 正则，会导致 normalize.css 等基础样式也被哈希化，页面直接崩坏。
动态加载模块化样式的副作用与规避
按需加载 CSS（如 import('./foo.module.css')）看似优雅，但存在两个硬伤：
- CSS 加载是异步的，而 JS 渲染可能早于样式注入完成，造成 FOUC（Flash of Unstyled Content）
- Webpack 会把
import()的 CSS 打包进独立 chunk，但该 chunk 缺乏执行时机控制——它可能在组件useEffect之后才注入，导致初始渲染无样式
更稳的方案是：组件级样式仍走同步 import（由构建工具统一处理模块化），仅将「非首屏、低优先级」的视觉增强类（如动画、主题色切换）延迟加载，并配合 document.fonts.load 或 requestIdleCallback 做加载后校验。
shadow DOM 或严格约束 modules 范围，就必须接受：某些复用样式（比如一套按钮变体）不能再靠覆盖类名实现，得转成可组合的 CSS 自定义属性或设计系统 token。 
