4

这是我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 样式，我将如何做才能使这些样式也处于全局范围内？

4

1 回答 1

2

您的设置问题是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'
}
于 2016-11-18T04:15:16.783 回答