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

Using CSS Modules and 3rd party packages

本文关键字：第三方 软件包 模块 CSS 使用      更新时间：2023-09-26

以下是我的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，以便它将第三方样式导入全局作用域，而将我自己的样式导入局部作用域?

另外，如果我想写自己的自定义样式覆盖React Datepicker样式，我该怎么做，使这些样式是在全局作用域?

设置的问题是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'
}

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

即使是第三方库css也可以被覆盖。

:global(.classname) {
  background-color: #fff;
}
相关文章：