3rd -party css not being applied

Question

I'm trying to use react-responsive-carousel library and in order to appear correctly it requires the import of

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

When I load up my app I'm not seeing the styles applied to the component. I'm guessing it had something to do with my webpack configuration but I haven't found a solution yet

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>
}

Closemouthed

Arent you missing .css at carousel.min in the import? – Neve

oh let me update that. I was playing around with stuff earlier and that was just a small change. It still doesn't work with the .css at the end as well – Closemouthed

Answer 1

Following the its npm page

Using webpack or parcel with a style loader

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

usually css files are imported in top level page of your application so that it will be loaded globally

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

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

Lysozyme

Answer 2

The issue here was that the css-loader was configured to not use the modules option. This meant that the css-loader was not applying the css classes correctly, because the modules option should be set to false when importing 3rd party css.

To fix this, the webpack config should be updated as follows:

module: {
    rules: [
        {
            test:/\.css$/,
            include: /node_modules/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    },
                }
            ]
        }
    ]
}

Overanxious