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

1 个答案: