Webpack 多个 CSS 加载器

IT技术 reactjs webpack
2021-05-15 22:14:06

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

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