Webpack 多个 CSS 加载器

Question

我正在尝试加载 bootstrap CSS，使其可供 webpack 在应用程序中使用。不过，我还有一个带有 localIndentName 的 CSS 加载器，用于组件特定的 CSS，以避免其他组件内的命名冲突。因此，引导类名被重命名为...node_modules__blah__blah 等。

避免这种情况的最简单方法是什么？我知道将 CDN 添加到标头会很快，但浏览器似乎在多次热重新加载后使 CDN 查找超时，不确定 CDN 是否受到限制或什么（如果有办法解决此问题，那就是我认为最好的解决方案）。

配置：

{ 
  test: /(\.css|\.scss)$/,
  loaders: [
    'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
    'resolve-url',
    'sass?sourceMap',
  ],
}

谢谢！

感谢指导，这是我最终得到的配置：

  {
    test: /(\.css|\.scss)$/,
    loaders: [
      'style?sourceMap',
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
      'resolve-url',
      'sass?sourceMap',
    ],
    exclude: [
      path.resolve('node_modules', 'bootstrap-sass')
    ]
  },
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'],
    include: [
      path.resolve('node_modules', 'bootstrap-sass')
    ]
  }

Answer 1

最好的方法是使用 Bootstrap 的 Less 或 Sass 源。或者，您可以使用该{include, exclude}选项并为从注册表安装的样式提供单独的加载器配置。