基于webpack4 & typescript的css-modu

本篇记录一下我们在最新版本wepbakc以及Typescript下配置css-modules的一些问题，以及css-modules在现有项目使用的一些tips

前情

在webpack4中extract-text-webpack-plugin这个合并css的插件并不被官方所推荐，官方推荐使用mini-css-extract-plugin来处理(mini-css-extract-plugin使用这里不赘述)。

处理这里的css-moduels很多教程生产模式会使用extract-text-webpack-plugin配合style-loader来将多个css合并成一个css然后将css-loader内部样式通过<style>注入到我们的HTML页面，而到了webpack4我们就需要使用mini-css-extract-plugin进行合并的处理，注：在dev模式不需要开启此插件

而我们同时需要使用typings-for-css-modules-loader这个loader去生成d.ts建立索引，来处理我们的在ts中使用css-moduels遇到没有类型问题，我们还需要使用scss来方便高效编写css，这里就存在loader处理先后的问题，需要注意。

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

            }

        }

    ]

}

坑

这里我们遇到一个坑，所有的css-moduels/typings-for-css-modules-loader教程并不会告诉你这里include配置不写会造成什么影响。当我们此前没有写这句话的时候，d.ts因为索引速度不够快，或者说没有在内部自动建立联系(这里原因比较迷)，会导致我们命令行和窗口直接报未找到类型的错误，需要手动重新编译一次，效率极低，当我们加上include后就可以随便折腾了(迷)include:path.resolve('src/'),

外部如何覆盖局部样式

当生成混淆的 class 名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。我们现在项目中的实践是可以给组件关键节点加上data-role属性，然后通过属性选择器来覆盖样式,一般可以用来覆盖子组件样式。如下图

多className情况下的处理，但官方不推荐配置多个class

后记

其实用react-css-modules来处理className会更为舒适，但@type/react-css-modules的坑实在太深，且看起来没人维护了，官方demo写法在当前版本会报错，不得不暂时放弃，要继续研究学习一下。