前端工程搭建入门（五）单独打包样式文件，使less支持 css

作者: 文者字清 | 来源:发表于2018-07-24 18:36 被阅读0次

背景

为什么要把样式打包成一个文件？
- 样式文件最终都会变成 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 类名不处理