1.什么是css模块化
官方定义为：
CSS files in which all class names and animation names are scoped locally by default.
CSS文件中的所有类名(class names) 和动画名(animation names) 的作用域都默认为当前作用域。
自我理解： 在当前作用域下，让css 支持对象式引用，且每个属性名称全局唯一
基本使用：
import styles from "./styles.css";
element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`;2.css模块化好处
只应用于当前组件，不会被全局样式覆盖，解决css中全局作用域(global scope)问题
更多好处说明，请参考glenmaddern.com/articles/cs…
3. webpack css module配置
对css/sass文件的处理，主要应用到了css-loader(github.com/webpack-con…), 我们也将在这里做模块化配置。同是支持普通import style处理，
所以在匹配规则中，利用css/sass文件名（需要支持模块化处理的以*.module.css/scss命名，常规不需支持css模块化以*.css/scss）命名。
最终配置如下 :
{
test: /\.css$/,
oneOf: [
{
test: /\.module\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
//other options
}
}
]
},
{
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
};关键配置在于css-loader options中modules,开启modules，设为true,以及利用oneOf匹配规则命中*.module.css/scss文件处理。
最终使用：
import './style.css'; //no css module
import styles from "./styles.module.css"; //css module
element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`;参考文章：
