使用 CSS 模块和 3rd 方包

Question

这是我的webpack.config.js 文件的相关部分：

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

当我编写自己的 CSS 并将其与 React 组件一起使用时，这非常有用。但是，我最近尝试使用 React Datepicker，它带有自己的 css 文件，可以导入到使用 React Datepicker 的组件中。

如何修改我的webpack.config.js 文件，以便我导入的 React Datepicker css 文件不会被具有本地类名的 CSS 模块转换？换句话说，是否可以配置 webpack，使其将 3rd 方样式导入全局范围，并将我自己的样式导入本地范围？

另外，如果我想编写自己的自定义样式来覆盖 React Datepicker 样式，我该如何做才能使这些样式也处于全局范围内？

Answer 1

您的设置问题是exclude: /node_modules/。从您的 css 加载程序设置中删除此行，您的 React-datepicker 应该可以工作。

如果要覆盖第三方组件的默认样式，可以

1. 查看库是否默认支持，有些提供主题选项
2. 或者，您始终可以找出库生成的 CSS，然后用您自己的规则覆盖这些规则。

编辑：

如果您必须显式导入 css，您可以创建一个新的加载器，如下所示：

{
  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

使用 :global(.classname) 您可以覆盖外部类名。

甚至可以覆盖第 3 方库 css。

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