CSS-Modules

本文参考文章 Class Modules
CSS-Modules功能很单纯，只加入了局部作用域和模块依赖；
作用：可以保证某个组件的样式，不会影响到其他组件；

一、局部作用域

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法： 使用一个独一无二的class名字，不会与其他选择器重名；

下面是一个React组件App.js；

import React from 'react';
import style from './App.css';
// 将样式文件App.css输入到style对象，然后引用style.title代表一个class；
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};


.title {
  color: red;
}

构建工具会将类名style.title 编译成一个哈希字符串；App.css也会同时被编译；这样一来，这个类名就变成独一无二的了，只对App组件有效；

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

二、webpack的 css-loader插件

webpack.config.js
最关键的一行：“style-loader!css-loader?modules”；在css-loader后面加了一个查询参数moudles，表示打开CSS Modules功能。

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

三、全局作用域

CSS Modules允许使用:global(.className)的语法，声明一个全局规则，凡事这样申明的class，都不会被编译成哈希字符串。

下面的代码：color的颜色被覆盖为green；

.title {
  color: red;
}
:global(.title) {
  color: green;
}

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

这段代码使用Hello world的颜色就是绿色；
使用global的目的在于：比如说我们引用来antd的一个样式，我们希望覆盖掉它原来的样式，那可以使用:global；那么问题来了，如果大部分样式希望保留antd原来的样式，只有部分组件希望覆盖掉原来的样式，那可以选择下面这种写法：将:global包裹在其他类名下；这样只有wrap下面的global才会覆盖样式。

.wrap {
  width: 100%;
  :global {
    .ant-spin {
      width: 100%;
      height: calc(100vh - 120px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

四、定制哈希类名

css-loader默认的哈希算法是：[hash: base64]，这会将 .title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串；
webpack.config.js 里面可以定制哈希字符串的格式；

module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

五、Class的组合

CSS Modules中，一个选择器可以继承另一个选择器，这叫做 “组合”。

通过composes去继承css样式；

.className {
  background-color: blue;
}

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

<h1 className={style.title}>
  Hello World
</h1>

编译结果：

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">

六、输入其他模块

.className {
  background-color: blue;
}

继承来another.css文件中的className

.title {
  composes: className from './another.css';
  color: red;
}

七、输入变量

CSS Modules 支持使用变量，不过需要安装PostCSS 和 postcss-modules-values；

$ npm install --save postcss-loader postcss-modules-values

把postcss-loader 加入 webpack.config.js；

var values = require('postcss-modules-values');

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
}

接着，在colors.css 里面定义变量；

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css文件可以引入这些变量

@value colors: "./colors.css";
@value blue, red, green from colors;

.title {
  color: red;
  background-color: blue;
}