背景
- 為什么要把樣式打包成一個文件？
- 樣式文件最終都會變成 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 類名不處理
- 解決思路：
- 正常使用姿勢：
