背景
- 為什么要把樣式打包成一個文件舟扎？
- 樣式文件最終都會變成 style 標簽插到 html 的 head 標簽里分飞，由于業(yè)務(wù)引用的樣式文件很多，所以會生成很多的 style 標簽睹限，導(dǎo)致 html 文件很亂譬猫，最主要的是 ie9 瀏覽器對style 標簽數(shù)量有限制，所以樣式文件打包成一個很重要羡疗。
- 為什么要把 less 模塊化染服？
- 我們都知道 css modules 是為了解決樣式重名覆蓋問題的（因為最終樣式都打包在一個文件里），當然使用 less 也會存在這樣的問題叨恨，但是 less 又不支持 modules 屬性柳刮，怎么解決 less 類重名的問題呢？
下面就來談一談這些問題的解決方案（只是個人觀點痒钝，可能還有更好的方案秉颗，奈何水平有限??）
樣式文件分類打包
- 插件
extract-text-webpack-plugin，文檔 - 這個插件沒有什么坑送矩，按照文檔配置來就可以了
像使用 css modules 一樣使用less
-
先說一下 css modules
-
使用方式：
image.png -
編譯結(jié)果：
image.png webpack配置：
{ test: /\.css$/, loader: 'style-loader!css-loader?{"modules":true}' }, -
-
使用 less
- 正常使用姿勢：
image.png- 問題：
image.png
文件結(jié)構(gòu)：
index.js
不難發(fā)現(xiàn)蚕甥，List 和 Detail 組件都引用了自己模塊的 less文件，而且兩個 less 文件的類名都是 container栋荸，但是樣式不同菇怀，最后打包在一起，導(dǎo)致重名類樣式被覆蓋晌块。如何解決呢爱沟？根據(jù) css modules 的輸出結(jié)果我們可以得到啟示，可以借助 css modules 來實現(xiàn)生成不同的類名匆背。
- 問題：
- modules 使用方式：
image.png - 輸出結(jié)果：
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' } ] }) }- 實現(xiàn)思路：所有的樣式文件最終都會轉(zhuǎn)換成 css 代碼，都需要使用 css-loader 钝尸，所以就可以借助 css-loader 的 modules 配置實現(xiàn) less 的 modules 用法蜂大。
- 存在的問題：公共樣式也使用的 less ，這樣的配置豈不是把公共樣式的類名也改變了蝶怔，導(dǎo)致業(yè)務(wù)無法使用公共樣式奶浦。
- 解決思路：
- 1、業(yè)務(wù)樣式文件和公共樣式文件使用不同的命名踢星，然后在 為 loader 匹配文件時澳叉，做不同的處理。
- 2、 使用 include 和 exclude 配置項對公共樣式文件區(qū)分成洗，以實現(xiàn) 公共樣式 less 類名不處理
- 解決思路：
- 正常使用姿勢：
