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

背景

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