学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。
为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。
本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。
因此，CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件。
零、示例库
我为这个教程写了一个示例库，包含六个Demo。通过它们，你可以轻松学会CSS Modules。
首先，克隆示例库。
|
1 |
$ git clone https://github.com/ruanyf/css-modules-demos.git |
然后，安装依赖。
|
1 2 |
$ cd css-modules-demos $ npm install |
接着，就可以运行第一个示例了。
|
1 |
$ npm run demo01 |
打开浏览器，访问http://localhost:8080，查看结果。其他示例的运行方法类似。
一、局部作用域
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
下面是一个React组件App.js。
|
1 2 3 4 5 6 7 8 9 10 |
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。
|
1 2 3 |
.title { color: red; } |
构建工具会将类名style.title编译成一个哈希字符串。
|
1 2 3 |
<h1 class="_3zyde4l1yATCOkgn-DBWEL"> Hello World </h1> |
App.css也会同时被编译。
|
1 2 3 |
._3zyde4l1yATCOkgn-DBWEL { color: red; } |
这样一来，这个类名就变成独一无二了，只对App组件有效。
CSS Modules 提供各种插件，支持不同的构建工具。本文使用的是 Webpack 的css-loader插件，因为它对 CSS Modules 的支持最好，而且很容易使用。顺便说一下，如果你想学 Webpack，可以阅读我的教程Webpack-Demos。
下面是这个示例的webpack.config.js。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filename: './bundle.js' }, module: { loaders: [ { test: /.jsx40914459-9"> { test: /.jsxp>
本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。 因此，CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件。
零、示例库我为这个教程写了一个示例库，包含六个Demo。通过它们，你可以轻松学会CSS Modules。 首先，克隆示例库。
然后，安装依赖。
接着，就可以运行第一个示例了。
打开浏览器，访问http://localhost:8080，查看结果。其他示例的运行方法类似。 一、局部作用域CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。 产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。 下面是一个React组件App.js。
上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class。
构建工具会将类名style.title编译成一个哈希字符串。
App.css也会同时被编译。
这样一来，这个类名就变成独一无二了，只对App组件有效。 CSS Modules 提供各种插件，支持不同的构建工具。本文使用的是 Webpack 的css-loader插件，因为它对 CSS Modules 的支持最好，而且很容易使用。顺便说一下，如果你想学 Webpack，可以阅读我的教程Webpack-Demos。 下面是这个示例的webpack.config.js。
|
