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

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

React- How to use both locally scoped css and css from third party components

javascript

reactjs

react-select

css-modules

react-css-modules