CSS中 :global，偷师学艺来的新技能 CSS Modules

本文链接：https://blog.csdn.net/EcbJS/article/details/106258541

本文深入探讨CSS Modules的使用技巧，包括如何通过:global提升样式为全局作用域，利用composes实现样式复用，以及如何在Webpack中配置CSS Modules以避免样式污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章参考以下博文

文章目录

今天代码review，看到有个样式文件不太寻常，以前从没见过，类似下面这样

.container {
    :global {     //这一行一开始没见过，猜测提升为全局样式之类的
        .ant-modal-content {
            .ant-modal-body {
                padding: 0;
            }
        }
        ...
    }
}

经过一番知识补充，总结一下 :global 的用法

css冷知识

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效 。（记住这句话，之前我一直以为，只有 import 之后，使用的样式才有用，其实不是）

局部作用域

产生局部作用域需要制定一个唯一的 class 类名，这就需要 CSS Modules 来帮助我们。

首先第一步，在 WebPack 中配置 CSS Modules

// webpack.config.js
const path = require('path')

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,  //在css-loader中设置modules: true就可以了
            }
          }
        ]
       }
    ]
  }
}
// 或者使用下面这种写法
// loader: "style-loader!css-loader?modules"

配置完成之后， CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和混淆后 class 的对应关系。 CSS Modules 自动生成的 class 类名基本就是唯一的，大大降低了项目中样式覆盖冲突的几率。

这样可以防止全局污染，解决了困惑我很久的问题，其他的模块又没引用这个css文件，怎么会有该文件的样式呢？

全局作用域

回到一开始我贴出的那个代码， :global 是 CSS Modules 提供的可以把类名提升的全局作用域，就是不进行哈希编译。这样就跟以前那种全局污染的情况一样（毕竟有时候也需要设置全局样式）。

CSS Modules下的样式复用

CSS Modules 还给我们提供了一个 composes 来继承另一个选择器的规则。

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

今天发现了一个非常好用的模块依赖， CSS Modules，学习理解还不够全面，接下来会继续深入了解这方面内容，等有新的感悟时，回来继续补充。