CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。 产生局部作用域的唯一方法,就是使用一个独一无二的`class`的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。 下面是一个React组件[`App.js`](https://github.com/ruanyf/css-modules-demos/blob/master/demo01/components/App.js)。 ~~~ import React from 'react'; import style from './App.css'; export default () => { return ( <h1 className={style.title}> Hello World </h1> ); }; ~~~ 上面代码中,我们将样式文件[`App.css`](https://github.com/ruanyf/css-modules-demos/blob/master/demo01/components/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 提供各种[插件](https://github.com/css-modules/css-modules/blob/master/docs/get-started.md),支持不同的构建工具。本文使用的是 Webpack 的[`css-loader`](https://github.com/webpack/css-loader#css-modules)插件,因为它对 CSS Modules 的支持最好,而且很容易使用。顺便说一下,如果你想学 Webpack,可以阅读我的教程[`Webpack-Demos`](https://github.com/ruanyf/webpack-demos)。 下面是这个示例的[`webpack.config.js`](https://github.com/ruanyf/css-modules-demos/blob/master/demo01/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 ,可以看到[结果](http://ruanyf.github.io/css-modules-demos/demo01/),`h1`标题显示为红色。