React- 如何同时使用本地范围的 css 和来自第三方组件的 css

Question

我正在使用本地范围限定我的 css 文件

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

在 webpack.config.dev 和 prod.js 中。我可以使用我为组件定义的样式，使用来自“./Component.css”的导入样式。现在我正在尝试使用 react-select 第三方组件。现在该组件具有我想要使用的预定义样式。要使用它，我按如下方式导入样式

导入'反应选择/dist/react-select.css'

但是样式没有被应用。如何为导入的组件启用预定义的样式。

Answer 1

您可以使用 aresource query根据查询以不同方式处理 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]'
            }
          }
        ]
      }
    ]
  }
};