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

Question

我正在使用

对我的 css 文件进行本地范围界定

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

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

导入'react-select/dist/react-select.css'

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

Answer 1

您可以使用 resource 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]'
            }
          }
        ]
      }
    ]
  }
};