Question

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

避免这种情况最简单的方法是什么？我知道将CDN添加到标题会很快，但浏览器似乎在经过如此多的热重新加载后超时CDN查找，不确定CDN是否受到限制或是什么（如果有这样的方法来解决这个问题，那么＆＃ 39;在我看来，d是最好的解决方案。

配置：

{ 
  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}选项，并为从注册表安装的样式提供单独的加载程序配置。

Webpack多个CSS加载器

1 个答案: