CSS Modules

CSS 模块化，主要是包括两个方面：局部作用域和模块依赖。

局部作用域

保证某个组件的样式不会影响到其他组件，其原理就是使用一个独一无二的 class 名，不会与其他选择器重名。

为什么不使用 id 来确定：样式复用，样式覆盖问题，语义化。

CSS Modules 提供各种插件，支持不同的构建工具。

全局作用域

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

局部作用域

• 显示局部作用域：:local(.className)
• （隐式）局部作用域：.className（直接写）

定制哈希类名

对于插件 css-loader 来说，默认的哈希算法是[hash:base64]，这会将.title 编译成.\_3zyde4l1yATCOkgn-DBWEL这样的字符串。

CSS 组合

在 CSS Module 中可以使用composes继承别的 class 的样式：

.className {
  background-color: blue;
}

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

引入其他 CSS 模块样式

选择器也可以继承其他 CSS 文件里面的规则。

.className {
  background-color: blue;
}

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

导出变量

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

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

• 例如在 webpack 中引入 postcss-loader

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var values = require("postcss-modules-values");

module.exports = {
  entry: ["./src/index"],
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "public"),
    publicPath: "/public/",
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"
        ),
      },
    ],
  },
  postcss: [values],
  plugins: [new ExtractTextPlugin("style.css", { allChunks: true })],
};

• 设置变量

colors.css

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

• 引入 css 文件中

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

.button {
  color: blue;
  display: inline-block;
}