CSS Modules 指的是我们像 import js 文件一样去引入我们的 css 代码，代码中的<b>每一个类名</b>都是<b>引入对象的一个属性</b>。<br><br>并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。<br>
使用方式
1、定义 css 文件
.className {<br> color: green;<br>}<br>/* 编写全局样式 */<br>:global(.className) {<br> color: red;<br>}<br><br>/* 样式复用 */<br>.otherClassName {<br> composes: className;<br> color: yellow;<br>}<br><br>.otherClassName {<br> composes: className from "./style.css";<br>}<br>
2、在 js 模块中导入 css 文件
import styles from "./style.css";<br><br>element.innerHTML = '<div class="' + styles.className + '">';<br>
3、配置 css-loader 打包
<b>CSS Modules 不能直接使用</b>，需要进行打包，通过<b>配置 css-loader 中的 modules 属性</b>即可完成 css modules 的配置。<br><br>// webpack.config.js<br>module.exports = {<br> module: {<br> rules: [<br> {<br> test: /\.css$/,<br> use:{<br> loader: 'css-loader',<br> options: {<br><b> modules: {<br> // 自定义 hash 名称<br><font color="#0076b3"> localIdentName</font>: '</b>[hash:base64]<b>',<br> }</b><br> }<br> }<br> ]<br> }<br>};<br>
4、最终打包出来的 css 类名<br>就是由一长串 hash 值生成<br>
._2DHwuiHWMnKTOYG45T0x34 {<br> color: red;<br>}<br><br>._10B-buq6_BEOTOl9urIjf8 {<br> background-color: blue;<br>}<br>
