背景
- 为什么要把样式打包成一个文件？
- 样式文件最终都会变成 style 标签插到 html 的 head 标签里，由于业务引用的样式文件很多，所以会生成很多的 style 标签，导致 html 文件很乱，最主要的是 ie9 浏览器对style 标签数量有限制，所以样式文件打包成一个很重要。
- 为什么要把 less 模块化？
- 我们都知道 css modules 是为了解决样式重名覆盖问题的（因为最终样式都打包在一个文件里），当然使用 less 也会存在这样的问题，但是 less 又不支持 modules 属性，怎么解决 less 类重名的问题呢？
下面就来谈一谈这些问题的解决方案（只是个人观点，可能还有更好的方案，奈何水平有限😅）
样式文件分类打包
- 插件
extract-text-webpack-plugin，文档 - 这个插件没有什么坑，按照文档配置来就可以了
像使用 css modules 一样使用less
-
先说一下 css modules
-
使用方式：
image.png -
编译结果：
image.png webpack配置：
{ test: /\.css$/, loader: 'style-loader!css-loader?{"modules":true}' }, -
-
使用 less
- 正常使用姿势：
image.png- 问题：
image.png
文件结构：
index.js
不难发现，List 和 Detail 组件都引用了自己模块的 less文件，而且两个 less 文件的类名都是 container，但是样式不同，最后打包在一起，导致重名类样式被覆盖。如何解决呢？根据 css modules 的输出结果我们可以得到启示，可以借助 css modules 来实现生成不同的类名。
- 问题：
- modules 使用方式：
image.png - 输出结果：
image.png
完美的解决了重名样式被覆盖的问题！ - webpack 配置
{ test: /\.less$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: true, localIdentName: '[name]_[local]-[hash:base64:5]' } }, { loader: 'less-loader' } ] }) }- 实现思路：所有的样式文件最终都会转换成 css 代码，都需要使用 css-loader ，所以就可以借助 css-loader 的 modules 配置实现 less 的 modules 用法。
- 存在的问题：公共样式也使用的 less ，这样的配置岂不是把公共样式的类名也改变了，导致业务无法使用公共样式。
- 解决思路：
- 1、业务样式文件和公共样式文件使用不同的命名，然后在 为 loader 匹配文件时，做不同的处理。
- 2、 使用 include 和 exclude 配置项对公共样式文件区分，以实现 公共样式 less 类名不处理
- 解决思路：
- 正常使用姿势：
