bounty将在21小时后过期。回答此问题可获得+50声望奖励。Baby Coder希望引起更多人关注此问题。

我正在尝试使用react-responsive-carousel库，为了正确显示，它需要导入

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

当我加载我的应用程序时，我没有看到应用到组件的样式。我猜这与我的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>
}