前言

本文演示了

• 如何開始css模組化；
• 如何選擇性的開啟部分css檔案的模組化功能；
• 如何讓模組化後寫入html的class更具有可讀性；
• 涉及到的loader： css-loader、style-loader
  

開啟css-loader的模組化配置

當前專案目錄和package.json配置：：

如何使css模組化？需要在我們的webpack.config.js中對css-loader進行一些額外設定。

編輯main.css

編輯之前的app.js 檔案

編輯之後的app.js 檔案

執行 npm run dev

瀏覽器截圖如下:

可以看出瀏覽器控制檯打印出的main是一個js物件，所以我們在應用main.css中的類名的時候，需要用 main.ot 。

同理，我們可以新建多個css檔案（main1.css、main2.css），引用其中的類名的時候，只需要用main1.o或者main2.ot。這樣即使不同的樣式檔案中class重名也不會產生樣式的覆蓋。

但是，一旦開啟css模組化，意味著所引入的所有的css檔案都要用css模組化的寫法。

如何開啟單個樣式檔案的全域性模式呢（某個樣式檔案不想要css模組化的寫法）？

可以在webpack.config.js中配置兩次處理css的loader，配置如下圖：

上面的配置保證了在node_modules和src/common下的css是全域性的，在其之外的css是模組化的。

編寫app.js如下。

執行npm run dev,測試兩個樣式均正常載入。

開啟瀏覽器控制檯，看到生成的html中的class名是一堆base64字元。

如何讓css模組化後生成的class具有可讀性？

配置webpack.config.js中css-loader的localIdentName：

執行npm run dev，瀏覽器控制檯截圖如下：

可以看出 '[path]-[name]-[local]-[hash:base64:6]' 對應  'src-common-style--main-ot-7LqHWv'。

一般，在專案中配置 localIdentName: '[name]-[local]-[hash:base64:6]' 就可以。