In my React application using css-modules, I encountered an issue when trying to import CSS files from external libraries. Due to the inability to globally wrap them in a :global block, webpack interprets them as styles intended for objects only.
Is there a way to import CSS files as global CSS for imported plugins?
For example, in src/index.js:
import 'draft-js/dist/Draft.css';
//unable to include in :global block
import 'react-responsive-carousel/lib/styles/carousel.min.css';
//successfully wrapped in :global {...} block and works correctly
import './styles/app.css';
This is the Webpack configuration adopted from Create-React-App:
test: /\.css$/,
loader: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
},
},
'postcss-loader'
]