阅读 66

webpack配置——CSS Module

前言

千辛万苦从webpack2.5.1升级到4.44.2,终于编译成功,可是样式都没了,对比之前的项目,发现html中的中的上类名没有变成hash值,而下面中的类名已经打包成hash值,所以样式类名没有对应上导致样式不显示

排查原因

开启css-modules之后,类名才会打包成hash值,所以是css-modules配置问题
小插曲:由于是style-loader给html加上,一开始以为是style-loader的配置问题,尝试修改属性并没有效果,试着修改了css-loader的配置,发现有变化,原来是css-loader的配置,现在想想,只能是css modules的问题)

解决

项目中涉及到配置css modules的有两处,并且两处打包的类名要对应上,即css-loader中的 localIdentName 要和babel中的 generateScopedName 对应上,如下:

1、一处webpack样式配置中css-loader的配置,这里是给style标签上的类名进行打包

{
    loader: 'css-loader',
    options: {
        import: true,
        modules: {
            localIdentName: '[path]__[name]__[local]', 
        },
        sourceMap: true,
        importLoaders: 2,
    },
},
复制代码

2、另一处是babel的配置,项目之前用的是react-css-modules,这个依赖包要删掉,此次升级之后用的是babel-plugin-react-css-modules,此处是配置body中div标签上的类名

[
    'react-css-modules',
    {
        "generateScopedName": "[path]__[name]__[local]",
        "webpackHotModuleReloading": true,
        "filetypes": {
            ".less": {
                "syntax": "postcss-less"
            }
        },
    }
]
复制代码

遗留问题

1、如上所示,并没有将类名打包成hash值,因为如果用 [hash:base64:5],两处打包会是不一样的值,原因不明 2、安装的是webpack4,但是配置css-loader时发现用文档中webpack4对应的css-loader的配置会报错,说没有这个属性,反而用webpack5版本可以,?我想不通

文章分类
前端
文章标签