一、局部作用域
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
标题显示为红色。