CSSモジュールは、これを達成するためにWebPACKのパッケージツールを使用する必要があります。アイデアは、ファイルが、CSSのjsモジュールをインポートすることができ、かつオブジェクトが導入されていることです。その後は最終的にCSSセレクタWebPACKのプラグイン、HTML要素としてこのオブジェクト・クラス名のプロパティで使用さJSとJSレーンの代わりにクラス名の一意の文字列を有するので、CSSプロパティは、意志これは、生成されたHTMLのjs cssファイルに導入されました。JS CSSのモジュールは、すべてのHTMLを生成するために必要。以下は、CSSモジュールの簡単な例です:
1
2
3
4
5
6
|
インポート
スタイル
から
「./styles.css」
。
element.innerHTML =
`<H1 CLASS = " $ {styles.title} ">
見出しの例
</ H1> `;
|
キーワードクラスは、スタイル、他のクラスを参照することができます構成:
1
2
3
4
5
6
7
8
9
|
.serifフォント
{
フォントファミリ
:ジョージア、セリフ。
}
.display
{
構成
:セリフフォントを。
font-size:
30px;
line-height:
35px;
}
|
使用css modules
在一个新文件夹下初始化一个npm项目:
安装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