在 webpack 中反应多个 css 加载器

【问题标题】：React multiple css loaders in webpack在 webpack 中反应多个 css 加载器
【发布时间】：2017-10-05 19:14:39
【问题描述】：

我正在使用 react-bootstrap 和 css 模块。在我的 webpack.config.js 中，我可以使用这个配置运行我的 bootstrap.css：

{ test: /\.css$/, loader: "style-loader!css-loader" }

但是我的 css 模块应该有这个设置：

{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

如何将它们结合起来使其适用于 css 模块和 react-bootstrap

【问题讨论】：

标签： reactjs webpack css-modules react-css-modules

【解决方案1】：

您可以保留两个加载器：一个用于 global CSS（如 Bootstrap），另一个用于 CSS 模块。

为了避免具有相同test属性的加载器之间发生冲突，请使用webpack的规则include和exclude属性：

{
  test: /\.css$/,
  loader: "style-loader!css-loader",
  include: [
    /* Paths to Bootstrap and further global CSS only */
  ]
},
{
  test: /\.css$/,
  loaders: [
    'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]'
  ],
  include: [
    /* eg. Paths to your source directory  */
  ]
}

【讨论】：