On the css modules

css modules need to use webpack packaging tools to achieve this. The idea is that the file can be imported css js module, and an object is introduced. Js then be used in the properties of this object class name as html element, webpack plug-in will eventually css selectors and js Lane with a unique string instead of the class name, so the css properties will only It was introduced to the html js css file generated. js css modules required to generate all html. The following is a simple example of the css modules:

1 2 3 4 5 6

import styles from "./styles.css"; element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`;

composes the keyword class can refer to a style other classes:

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