模块化前端 css,webpack CSS 模块化配置

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 = `

An example heading

`;复制代码

2.css模块化好处

只应用于当前组件，不会被全局样式覆盖，解决css中全局作用域(global scope)问题

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 = `

An example heading

`;复制代码

参考文章：