使用 CSS 模块和第 3 方包

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，以便将第 3 方样式导入到全局范围，并将我自己的样式导入到本地范围？

另外，如果我想编写自己的自定义样式来覆盖 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'
}