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; } |
在一个新文件夹下初始化一个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
