前言
本文演示了
- 如何开始css模块化；
- 如何选择性的开启部分css文件的模块化功能；
- 如何让模块化后写入html的class更具有可读性；
- 涉及到的loader： css-loader、style-loader
开启css-loader的模块化配置
当前项目目录和package.json配置：：
如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置。
编辑main.css
编辑之前的app.js 文件
编辑之后的app.js 文件
执行 npm run dev
浏览器截图如下:
可以看出浏览器控制台打印出的main是一个js对象，所以我们在应用main.css中的类名的时候，需要用 main.ot 。
同理，我们可以新建多个css文件（main1.css、main2.css），引用其中的类名的时候，只需要用main1.o或者main2.ot。这样即使不同的样式文件中class重名也不会产生样式的覆盖。
但是，一旦开启css模块化，意味着所引入的所有的css文件都要用css模块化的写法。
如何开启单个样式文件的全局模式呢（某个样式文件不想要css模块化的写法）？
可以在webpack.config.js中配置两次处理css的loader，配置如下图：
上面的配置保证了在node_modules和src/common下的css是全局的，在其之外的css是模块化的。
编写app.js如下。
执行npm run dev,测试两个样式均正常加载。
打开浏览器控制台，看到生成的html中的class名是一堆base64字符。
如何让css模块化后生成的class具有可读性？
配置webpack.config.js中css-loader的localIdentName：
执行npm run dev，浏览器控制台截图如下：
可以看出 '[path]-[name]-[local]-[hash:base64:6]' 对应 'src-common-style--main-ot-7LqHWv'。
一般，在项目中配置 localIdentName: '[name]-[local]-[hash:base64:6]' 就可以。