第三方CSS未生效：react-responsive-carousel样式不加载问题排查

我在使用react-responsive-carousel库时，按照要求导入了样式文件：

import 'react-responsive-carousel/lib/styles/carousel.min.css';

但启动应用后组件样式完全没生效，推测是Webpack配置的问题，但还没找到解决办法。以下是相关配置文件和组件代码：

webpack.config.common.js #

module.exports = {
    "entry": ['core-js/stable', 'regenerator-runtime/runtime', paths.appIndexJs],
    "output": {
        "filename": '[name].[contenthash].js',
        "path": paths.appBuild,
        "publicPath": './'
    },
    "resolve": {
        "extensions": ['.js', '.jsx', '.ts', '.tsx', '.scss','.css'],
        "modules": ['node_modules']
    },
    "plugins": [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            "filename": 'index.html',
            "inject": true,
            "template": paths.appHtml
        }),
        new ESLintPlugin({
            "formatter": eslintFormatter,
            "eslintPath": 'eslint',
            "resolvePluginsRelativeTo": __dirname
        })
    ],
    "module": {
        "rules": [
            {
                "test": /\.(js|ts)x?$/,
                "exclude": /node_modules/,
                "use": {
                    "loader": 'babel-loader',
                    "options": {
                        "cacheDirectory": true
                    }
                }
            },
            {
                "test": [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                "loader": require.resolve('url-loader'),
                "options": {
                  "limit": imageInlineSizeLimit,
                  "name": 'static/media/[name].[hash:8].[ext]',
                },
            },
            {
                "loader": require.resolve('file-loader'),
                "exclude": [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
                "options": {
                    "name": 'static/media/[name].[hash:8].[ext]',
                },
            }
        ]
    }
}

webpack.config.dev.js #

module.exports = merge(commonConfig, {
    "mode": 'development',
    "devtool": 'inline-source-map',
    "devServer": {
        "static": './dist',
        "port": 3001,
        "historyApiFallback": true
    },
    "output": {
        "publicPath": '/'
    },
    "module": {
        "rules": [
            {
                "test":/\.css$/,
                "include": /node_modules/,
                "use": [
                    'style-loader',
                    {
                        "loader": 'css-loader',
                        "options": {
                            "modules": false
                        },
                    },
                ]
            },
            {
                "test":/\.(scss|sass|css)$/,
                "use": [
                    'style-loader', 
                    {
                        "loader": 'css-loader',
                        "options": {
                            "importLoaders": 2,
                            "modules": {
                                "getLocalIdent": getCSSModuleLocalIdent
                            }
                        },
                    },
                    {
                        "loader": 'postcss-loader',
                        "options": {
                            //ident: 'postcss',
                            "postcssOptions": {
                                "plugins": () => [
                                    require('postcss-flextbugs-fixes'),
                                    require('postcss-preset-env')({
                                        "autoprefixer": {
                                            "flexbox": 'no-2009',
                                          },
                                          "stage": 3
                                    }),
                                    postcssNormalize()
                                ]
                            }
                        }
                    },
                    'resolve-url-loader', 
                    'sass-loader'
                ],
                "sideEffects": true
            },
        ]
    }
})

TestimonialsComponent.tsx #

import React from 'react';
import { Carousel } from 'react-responsive-carousel';

import { testimonialsList, Testimonial } from '../Common/precious-testimonials';

import 'react-responsive-carousel/lib/styles/carousel.min.css';

type TestimonialElementProp = {
    "testimonial": Testimonial
}


const TestimonialElement = ({ testimonial }: TestimonialElementProp) => {
    return <div>
        <img src={testimonial.Image} />
        <p>{testimonial.Quote}</p>
        <h5>{testimonial.PersonName}</h5>
        <h6>{testimonial.Title}</h6>
    </div>
}

export const TestimonialsComponent = () => {
    return <Carousel>
        {testimonialsList.map((testmol) => {
            return <TestimonialElement testimonial={testmol} />
        })}
    </Carousel>
}

问题出在Webpack的CSS规则优先级上：你在webpack.config.dev.js里定义了两条处理CSS的规则，第二条匹配scss/sass/css的规则没有排除node_modules，且Webpack按规则顺序匹配时，这条规则会覆盖第一条专门处理node_modules内CSS的规则。当导入第三方库的CSS时，会被第二条规则启用CSS模块化处理，导致类名被篡改，样式无法生效。

修复步骤： #

1. 修改第二条规则，添加exclude: /node_modules/，确保第三方库的CSS走第一条无模块化的规则：

{
    "test":/\.(scss|sass|css)$/,
    "exclude": /node_modules/, // 新增这一行
    "use": [
        'style-loader', 
        {
            "loader": 'css-loader',
            "options": {
                "importLoaders": 2,
                "modules": {
                    "getLocalIdent": getCSSModuleLocalIdent
                }
            },
        },
        {
            "loader": 'postcss-loader',
            "options": {
                "postcssOptions": {
                    "plugins": () => [
                        require('postcss-flextbugs-fixes'),
                        require('postcss-preset-env')({
                            "autoprefixer": {
                                "flexbox": 'no-2009',
                            },
                            "stage": 3
                        }),
                        postcssNormalize()
                    ]
                }
            }
        },
        'resolve-url-loader', 
        'sass-loader'
    ],
    "sideEffects": true
},

2. 保持第一条处理node_modules内CSS的规则在第二条规则之前（当前顺序已符合要求），确保Webpack优先匹配第三方库的CSS规则。

3. 重启开发服务器，样式即可正常生效。

内容的提问来源于stack exchange，提问作者Hana Likes Coding