使用 CSS 模块和第三方包

Question

Here is the relevant part of my webpack.config.js file:

module: {
    loaders: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loaders: [
                "style-loader?sourceMap",
                "css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]"
            ]
        },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]
}

This works great when I'm writing my own css and using it with my React components. However, I recently tried using React Datepicker and it comes with its own css files to import into the component that uses React Datepicker.

How can I modify my webpack.config.js file so that the React Datepicker css files that I import DON'T get transformed by CSS Modules with local class names? In order words, is it possible to configure webpack so that it imports 3rd party styles to the global scope and my own styles to a local scope?

Also, if I want to write my own custom styles that override the React Datepicker styles, how would I do it so that those styles are in global scope as well?

Answer 1

The problem with your setup is exclude: /node_modules/ . Remove this line from your css loader setup, and your React-datepicker should work.

If you want to override the default style of a third-party component, you can

1. Find out if the library support it by default, some provides themeing options
2. or, you can always find out the CSS that s generated by the library, then override the rules with your own.

Edit :

In the case you have to import css explicitly, you can just create a new loader, like this:

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
},
{
  test: /\.css$/,
  include: /node_modules/,
  loader: 'style!css'
}

Answer 2

Using:global(.classname) you can override the external classnames.

Even 3rd party library css can be override.

:global(.classname) {
  background-color: #fff;
}