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文件，以便我导入DON的反应Datepicker css文件由具有本地类名的CSS模块转换？换句话说，是否可以配置webpack，以便它将第三方样式导入全局范围，将我自己的样式导入本地范围？

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

Answer 1

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

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

查看图书馆默认是否支持它，有些提供主题选项
或者，您始终可以找到库生成的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'
}

使用CSS模块和第三方软件包

1 个答案: