CSS Modules

什么是CSS Modules？

官方的介绍是：

所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。

所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。（类似命名空间化）。

为什么我们要用CSS Modules?

有了 CSS Modules，就可以确保所有的样式能够服务于单个组件：

• 集中在一个地方
• 只应用于那个组件，其他组件不适用

这样设计的目的在于解决 CSS 中的全局作用域问题。

CSS Modules 使用方式

styles.scss

.wrap {
  width: 500px;
  height: 300px;
  padding: 30px 10px;

  .red {
    color: red;
  }
}

foo.js

import styles from "./styles.scss";
import mainStyles from "./main.scss";

class Foo extends React.Component {
    render() {
        return (
            <div className={styles.wrap}>
                <div className={styles.red + ' ' + mainStyles.fs_14}>我是受 CSS Modules 控制的文字。</div>
            </div>
        )
    }
}

Composes 关键词

.serif-font {
    font-family: Georgia,serif;
}
.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

// composes 还能混合外部样式文件的class
.container {
  text-align: left;
  font-size: 20px;
  composes: box from "../styles/layout.scss";
}

使用 composes 关键词会将2个class都绑定到元素上，类似 Sass 中的 @extend。

Webpack 对 CSS Modules 的配置

css modules 最简单的情形，只需要在 css-loader 启动 css module 配置即可。

一般项目中，会有 global.css 这样的全局 css 样式，这些样式不需要用作 css module，此时可以配置两种 css 管理方式（对  global.css 不作 css module 处理，其余的进行 css module 处理）。

webpack.config.dev.js

module: {
     rules: [{
         test: /\.(css|scss)$/,
         exclude: path.resolve(__dirname, 'src/styles/global'),
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
                 localIdentName: '[name]__[local]-[hash:base64:5]'
             }
           },
           'sass-loader'
         ]
      }, {
        test: /\.(css|scss)$/,
        include: path.resolve(__dirname, 'src/styles/global'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }]
   },