CSS Modules是近年来比较流行的一种开发模式，其理念就是把CSS模块化，让CSS也拥有模块的特点，具体如下：
- 每个CSS文件中的样式都拥有单独的作用域，不会和外界发生命名冲突。
- 对CSS进行依赖管理，可以通过相对路径引入CSS文件。
- 可以通过composes轻松复用其他CSS模块
使用CSS Modules时不需要额外安装模块，只要开启css-loader中的modules配置项即可。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.css/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
// localIndentName 用于指明CSS代码中的类名会如何编译。
// [name]指代的是模块名。
// [local]指代的是原本的选择器标识符。
// [hash:base64:5]指代的是一个5位的hash值，这个hash值是根据模块名和标识符计算的。
localIdentName: '[name]_[local]_[hash:base64:5]',
}
}
]
}]
}
}/* style.css */
.title {
color: #f938ab;
}
/*
经编译后可能会变为
.style_title_1cFy6
*/在使用过程中开发者还要注意在JavaScript中引入CSS的方式。之前直接将CSS文件引入就可以了，但使用CSS Modules时CSS文件会导出一个对象，所以开发者需要把这个对象的属性添加到HTML标签上。
// index.js
import styles from './style.css';
document.write(`<h1 class="${styles.title}">My Webpack app!</h1>`); 原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-css-modules.html
微信扫一扫 
支付宝扫一扫 
