Webpack: How to use CSS-modules and imported CSS from outside libraries?

Question

I am using css-modules in my react application, however when I try to import outside files in .js files, I cannot import them globally because I cannot wrap them in a :global block, and webpack interprets them as styles meant to be used as objects.

How do I import CSS files as global CSS from external libraries? This is CSS that is supposed to match imported plugins.

e.g.in src/index.js

import 'draft-js/dist/Draft.css';
//cannot wrap in a :global block since it is imported
import 'react-responsive-carousel/lib/styles/carousel.min.css'; 
// is wrapped in a :global {...} block, so it works
import './styles/app.css';

Webpack configuration, 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'
]

the other solution is including every css file i need in a separate vendor folder..but this seems inefficient — Yu Mad
– Yu Mad, Commented May 8, 2018 at 1:36

bschnelle · Accepted Answer · 2018-05-08 03:10:26Z

3

One option is to have two separate rules for src styles and node_modules styles and only set modules to true in your src config. It should look similar to below (I didn't test this) - the important options are include and exclude and to remove modules from the rule that applies to node_modules.

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                modules: true,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
},
{
    test: /\.css$/,
    include: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
}

answered May 8, 2018 at 3:10

bschnelle

2521 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yu Mad Over a year ago

one of my node_modules requires CSS modules, i do see how i could exclude it specifically though...

Collectives™ on Stack Overflow

Webpack: How to use CSS-modules and imported CSS from outside libraries?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related