css modules需要使用webpack这种打包工具实现。其思想是，使js文件可以导入css模块，并且导入的是一个对象。然后js可以使用这个对象的里的属性作为html元素的类名，webpack的插件最终会将css里的选择器和js里的类名用一个唯一的字符串代替，这样css里的属性就只会被用于导入了这个css文件的js所生成的html。css modules要求使用js生成所有的html。下面是一个简单的使用css modules的例子:
1
2
3
4
5
6
|
import styles
from
"./styles.css";
element.innerHTML =
`<h1 class="${styles.title}">
An example heading
</h1>`;
|
composes关键字使一个类可以引用其他类的样式:
1
2
3
4
5
6
7
8
9
|
.serif-font {
font-family: Georgia, serif;
}
.display {
composes: serif-font;
font-size:
30px;
line-height:
35px;
}
|
使用css modules
在一个新文件夹下初始化一个npm项目:
1
|
npm init --y
|
安装webpack:
1
2
3
|
npm i -D webpack
// or
npm install webpack --save-dev
|
新建一个webpack配置文件webpack.config.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const HtmlWebpackPlugin =
require(
'html-webpack-plugin');
const path=
require(
'path');
const PATHS = {
app: path.join(__dirname,
'src'),
build: path.join(__dirname,
'build'),
};
module.exports={
entry:{
app:PATHS.app
},
output:{
path:PATHS.build,
filename:
'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title:
'Webpack demo'
})
]
};
|
上面的entry和path要写绝对路径，html-webpack-plugin用于自动生成index.html。
要在项目中使用es6语法，需要安装下面的npm模块:
1
|
npm i -D babel-loader babel-core babel-preset-es2015
|
在webpack.config.js中加上loader:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
module.exports = {
entry:
'./src',
output: {
path:
'build',
filename:
'bundle.js',
},
module: {
loaders: [
{
test:
/.js/,
loader:
'babel-loader',
include: __dirname +
'/src',
}
],
}
};
|
处理css需要使用css-loader和style-loader:
1
|
npm i -D css-loader style-loader
|
添加一个index.css:
1
2
3
|
.text {
color:tomato;
}
|
index.js:
1
2
3
4
|
import style
from
'./index.css';
const text=
`<div class="${style.text}">hello world!</div>`;
window.onload=
()=>
document.body.innerHTML=text;
|
注意在index.js中给元素添加class名时不是直接用css中的选择器（text），而是用对象的属性（style.text）。
并更改配置文件:
1
2
3
4
5
|
{
test:
/.css/,
loader:
'style-loader!css-loader?modules',
include:path.join(__dirname,
'src')
}
|
css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。
运行index.html后，打开devtool，可以看到div的class名为_3e3Tpl6iY2cwXJCwpTZ4dc，这是由webpack的loader自动生成的。并且head中多了一个style标签:
1
2
3
|
<style type="text/css">
._3e3Tpl6iY2cwXJCwpTZ4dc {
color:tomato;
}
</style>
|
上面的内联style是style-loader生成的，为了生成一个独立的css文件，可使用:
1
|
npm i -D extract-text-webpack-plugin
|
原文:大专栏 初探css modules