2020-06-24
Ann Ann
我为这个教程写了一个示例库,包含六个Demo。通过它们,你可以轻松学会CSS Modules。
首先,克隆示例库。
$ git clone git@github.com:ruanyf/css-modules-demos.git
然后,安装依赖。
$ cd css-modules-demos
$ npm install
接着,就可以运行第一个示例了。
$ npm run demo01
打开浏览器,访问http://localhost:8080
,查看结果。其他示例的运行方法类似。
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
标题显示为红色。
CSS Modules 允许使用:global(.className)
的语法,声明一个全局规则。凡是这样声明的class
,都不会被编译成哈希字符串。
App.css
加入一个全局class
。
.title {
color: red;
}
:global(.title) {
color: green;
}
App.js
使用普通的class
的写法,就会引用全局class
。
import React from 'react';
import styles from './App.css';
export default () => {
return (
<h1 className="title">
Hello World
</h1>
);
};
运行这个示例。
$ npm run demo02
打开 http://localhost:8080,应该会[看到](http://ruanyf.github.io/css-modules-demos/demo02/)`h1`标题显示为绿色。
CSS Modules 还提供一种显式的局部作用域语法:local(.className)
,等同于.className
,所以上面的App.css
也可以写成下面这样。
:local(.title) {
color: red;
}
:global(.title) {
color: green;
}
css-loader
默认的哈希算法是[hash:base64]
,这会将.title
编译成._3zyde4l1yATCOkgn-DBWEL
这样的字符串。
webpack.config.js
里面可以定制哈希字符串的格式。
module: {
loaders: [
// ...
{
test: /\.css$/,
loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
},
]
}
运行这个示例。
$ npm run demo03
你会发现.title
被编译成了demo03-components-App---title---GpMto
。
在 CSS Modules 中,一个选择器可以继承另一个选择器的规则,这称为“组合”("composition")。
在App.css
中,让.title
继承.className
。
.className {
background-color: blue;
}
.title {
composes: className;
color: red;
}
App.js
不用修改。
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};
运行这个示例。
$ npm run demo04
打开http://localhost:8080
,会看到红色的h1
在蓝色的背景上。
App.css
编译成下面的代码。
._2DHwuiHWMnKTOYG45T0x34 {
color: red;
}
._10B-buq6_BEOTOl9urIjf8 {
background-color: blue;
}
相应地, h1
的class
也会编译成<h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8">
。
选择器也可以继承其他CSS文件里面的规则。
.className {
background-color: blue;
}
App.css
可以继承another.css
里面的规则。
.title {
composes: className from './another.css';
color: red;
}
运行这个示例。
$ npm run demo05
打开http://localhost:8080
,会看到蓝色的背景上有一个红色的h1
。
CSS Modules 支持使用变量,不过需要安装 PostCSS 和 postcss-modules-values。
$ npm install --save postcss-loader postcss-modules-values
把postcss-loader
加入webpack.config.js
。
var values = require('postcss-modules-values');
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!postcss-loader"
},
]
},
postcss: [
values
]
};
接着,在colors.css
里面定义变量。
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;
App.css
可以引用这些变量。
@value colors: "./colors.css";
@value blue, red, green from colors;
.title {
color: red;
background-color: blue;
}
运行这个示例。
$ npm run demo06
打开http://localhost:8080
,会看到蓝色的背景上有一个红色的h1
。
IT Support 训练营01期
2025/11/10 06:13 (Sydney)
CCNA考证班01期
2025/09/06 08:37 (Sydney)
商业数据分析实战班第17期
2025/03/15 06:13 (Sydney)
地址
Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)Level 2, 171 La Trobe St, Melbourne VIC 3000四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号Business Hub, 155 Waymouth St, Adelaide SA 5000Disclaimer
JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.
匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议
© 2017-2024 JR Academy Pty Ltd. All rights reserved.
ABN 26621887572