Webpack 多个 CSS 加载器 [英] Webpack Multiple CSS Loaders

问题描述

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

I'm trying to load bootstrap CSS to make it available to webpack to use within the application. However, I also have a CSS loader with localIndentName for component specific CSS to avoid naming conflicts within other components. Because of this, bootstrap classnames are getting renamed to things like...node_modules__blah__blah, etc.

避免这种情况的最简单方法是什么?我知道将 CDN 添加到标头会很快，但浏览器似乎在进行了如此多的热重载后使 CDN 查找超时，不确定 CDN 是否正在节流或什么(如果有办法解决这个问题，那就是我认为最好的解决方案).

What would be the easiest way to avoid this? I know adding the CDN to the header would be quick, but the browser seems to timeout the CDN lookup after so many hot reloads, not sure if the CDN is throttling or what (if there's a way to fix this, that'd be the best solution, in my opinion).

配置:

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

谢谢！

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

Thanks to the guidance, here's the configuration I ended up with:

  {
    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')
    ]
  }

推荐答案

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

The best approach would be to use Bootstrap's Less or Sass sources. Alternatively, you can use the {include, exclude} option and provide a separate loader configuration for styles installed from the registry.

这篇关于Webpack 多个 CSS 加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！