一、局部作用域

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。

产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

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

 import React from "react";
 import style from "./App.css";
 
export default () => {
   return (
     <h1 className={style.title}>
       Hello World
     </h1>
   );
 };

上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class。

 .title {
   color: red;
 }

构建工具会将类名style.title编译成一个哈希字符串。

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

App.css也会同时被编译。

 ._3zyde4l1yATCOkgn-DBWEL {
   color: red;
 }

这样一来，这个类名就变成独一无二了，只对App组件有效。

CSS Modules 提供各种插件，支持不同的构建工具。本文使用的是 Webpack 的css-loader插件，因为它对 CSS Modules 的支持最好，而且很容易使用。顺便说一下，如果你想学 Webpack，可以阅读我的教程Webpack-Demos。

下面是这个示例的webpack.config.js。

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"
       },
     ]
   }
 };
 

上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。

现在，运行这个Demo。

 $ npm run demo01

打开 http://localhost:8080 ，可以看到结果，h1标题显示为红色。