3rd -party css not being applied - css

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

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';

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