React- 如何同时使用本地作用域 css 和第三方组件中的 css

Question

我正在使用本地作用域来管理我的CSS文件，具体方法是

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

在webpack.config.dev和prod.js中，我可以使用import style from './Component.css'来使用我定义的组件样式。现在我正在尝试使用react-select第三方组件。该组件有其预定义的样式，我想使用它。为了使用它，我按如下所示导入样式： import 'react-select/dist/react-select.css' 但是样式没有被应用。如何启用导入组件的预定义样式？

- Braj

Answer 1

您可以使用资源查询来根据查询以不同的方式处理CSS导入。

这样，您就可以使用?external查询参数导入常规CSS。

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        oneOf: [
          {
            // import 'react-select/dist/react-select.css?external'
            resourceQuery: /external/, 
            use: ['style-loader', 'css-loader']
          },
          {
            use: ['style-loader', 'css-loader'],
            options: {
              modules: true,
              localIdentName: '[name]__[local]_[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};

- Tholle

---

我是新手，所以我的问题可能看起来很傻。在webpack.config.dev.js中，我将添加以下规则-'{ // import 'react-select/dist/react-select.css?external' resourceQuery: /external/, use: ['style-loader', 'css-loader'] }'。现在在<Select />组件中如何使用?external查询参数？还是我必须在自己的构建组件中使用?external？ - Braj

我想我明白了你的提示。在外部组件<Select/>中，我必须在添加上述规则后使用import 'react-select/dist/react-select.css?external'。如果我有错误，请告诉我，我会尝试一下。请忽略我的先前评论。 - Braj

@Braj 我在我的答案中写的注释 import 'react-select/dist/react-select.css?external' 只是一个如何在你的应用程序中使用它的示例。如果你在文件名结尾处添加了 ?external，Webpack 将把导入的 CSS 文件视为常规 CSS 而不是 CSS 模块。只需在你的应用程序中写一次 import 'react-select/dist/react-select.css?external'，那么 react-select 的 CSS 就会像预期的那样作为你的 CSS 的一部分。 - Tholle

我会尝试并更新您。另外，覆盖webpack主题会让我了解webpack如何与CSS和其他文件相关联的工作原理吗？ - Braj

非常好用。谢谢。 - Braj