javascript - 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]'
            }
          }
        ]
      }
    ]
  }
};