初探css modules

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模块:

扫描二维码关注公众号，回复： 7414298 查看本文章

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