本篇記錄一下我們?cè)谧钚掳姹緒epbakc以及Typescript下配置css-modules的一些問(wèn)題,，以及css-modules在現(xiàn)有項(xiàng)目使用的一些tips

前情

在webpack4中extract-text-webpack-plugin這個(gè)合并css的插件并不被官方所推薦，官方推薦使用mini-css-extract-plugin來(lái)處理(mini-css-extract-plugin使用這里不贅述),。

處理這里的css-moduels很多教程生產(chǎn)模式會(huì)使用extract-text-webpack-plugin配合style-loader來(lái)將多個(gè)css合并成一個(gè)css然后將css-loader內(nèi)部樣式通過(guò)<style>注入到我們的HTML頁(yè)面,，而到了webpack4我們就需要使用mini-css-extract-plugin進(jìn)行合并的處理，注：在dev模式不需要開(kāi)啟此插件

而我們同時(shí)需要使用typings-for-css-modules-loader這個(gè)loader去生成d.ts建立索引,，來(lái)處理我們的在ts中使用css-moduels遇到?jīng)]有類型問(wèn)題,，我們還需要使用scss來(lái)方便高效編寫css，這里就存在loader處理先后的問(wèn)題,，需要注意,。

typings-for-css-moduels-loader config demo

{

    test: /\.scss$/,

    include: path.resolve('src/'),

    use: [

            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,

        {

            loader: 'typings-for-css-modules-loader',

            options: {

            modules: true,

            namedExport: true,

            camelCase: true,

            sass: true,

            localIdentName: '[name]__[local]__[hash:base64:5]'

            }

        },

        {

            loader: 'sass-loader',

            options: {

            outputStyle: 'expanded',

            sourceMap: true

            }

        }

    ]

}

坑

這里我們遇到一個(gè)坑，所有的css-moduels/typings-for-css-modules-loader教程并不會(huì)告訴你這里include配置不寫會(huì)造成什么影響,。當(dāng)我們此前沒(méi)有寫這句話的時(shí)候,，d.ts因?yàn)樗饕俣炔粔蚩欤蛘哒f(shuō)沒(méi)有在內(nèi)部自動(dòng)建立聯(lián)系(這里原因比較迷),，會(huì)導(dǎo)致我們命令行和窗口直接報(bào)未找到類型的錯(cuò)誤,，需要手動(dòng)重新編譯一次，效率極低,，當(dāng)我們加上include后就可以隨便折騰了(迷)include:path.resolve('src/'),

外部如何覆蓋局部樣式

當(dāng)生成混淆的 class 名后,，可以解決命名沖突，但因?yàn)闊o(wú)法預(yù)知最終 class 名,，不能通過(guò)一般選擇器覆蓋,。我們現(xiàn)在項(xiàng)目中的實(shí)踐是可以給組件關(guān)鍵節(jié)點(diǎn)加上data-role屬性，然后通過(guò)屬性選擇器來(lái)覆蓋樣式,一般可以用來(lái)覆蓋子組件樣式,。如下圖

覆蓋子樣式

多className情況下的處理,，但官方不推薦配置多個(gè)class

后記

其實(shí)用react-css-modules來(lái)處理className會(huì)更為舒適，但@type/react-css-modules的坑實(shí)在太深,，且看起來(lái)沒(méi)人維護(hù)了,，官方demo寫法在當(dāng)前版本會(huì)報(bào)錯(cuò)，不得不暫時(shí)放棄,，要繼續(xù)研究學(xué)習(xí)一下,。