Webpack 多个 CSS 加载器答案

【问题标题】：Webpack Multiple CSS LoadersWebpack 多个 CSS 加载器
【发布时间】：2016-04-22 16:19:56
【问题描述】：

我正在尝试加载引导 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')
    ]
  }

【问题讨论】：

您可以使用正确的localIdentName 为引导 css 文件添加第二个加载程序。 Fitst loader 将通过添加 exclude (exclude: 'bootstrap') 参数来忽略引导程序，第二个将通过添加 include (include: 'bootstrap') 仅解析引导程序。
感谢您的意见！会试一试！

标签： reactjs webpack

【解决方案1】：

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

【讨论】：

太好了，等我回到办公桌前会试试这些方法！