如何使用Webpack CSS加载器避免全局样式标记？

Question

当webpack与各种CSS加载器一起使用时，看起来它会在反应组件中使用样式时创建新的样式标记。

例如，我的一个依赖项是使用antd组件，因此所有和样式都显示在头部。这会与其他地方使用的样式产生冲突。

还有其他方法来处理这个问题，而不是创建全局样式标记，这些css是否在本地应用于组件？

我对css相关设置的webpack配置如下

{
  test: /\.scss$/,
  use: [{
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "sass-loader" // compiles Sass to CSS
  }]
},
{
  test: /\.css/,
  loader: ['style-loader', 'css-loader']
}, {
  test: /\.jsx?$/,
  use: "babel-loader",
  exclude: /node_modules/
}, {
  test: /\.less$/,
  use: [{
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "less-loader" // compiles Less to CSS
  }]
}