导入CSS不适合使用WebPack 5和CSS Loader的dashes的班级名称工作5

发布于 2025-01-25 05:15:19 字数 553 浏览 0 评论 0原文

试图获取一个导入CSS来使用我的应用程序的第三方库。

我正在使用WebPack V5和CSS-Loader V5。由于从WebPack V4升级到V5，因此第三方库样式不再工作，因为CSS-Loader不允许命名出口，因此

import('./styles.css').then((styles) => console.log(styles))

会产生类似于styles.default.xxx而不是styles.xxx的

功能。在CSS-LOADER中是正确的选项。这将使我能够访问styles.xxx，而无需默认。但是，如果我将名为Export设置为css-loader中为true，我将无法再用破折号导入类（例如“以BTN为注重的”，因为CSS-Loader会将其转换为“ BTNFOCUSED”，并且第三方库将其称为样式的样式。 ['以BTN为中心的']）。我在CSS-LOADER中看到了一个选项ExportLocalsConvention，但是此选项仅限于“ camelcaseonly”或“ dashesonly”，而newsexport设置为true，并且这两个选项都无济于事。

原文

Trying to get a third party library that is importing css to work with my app.

I am using webpack v5 and css-loader v5. Since the upgrade from webpack v4 to v5, the 3rd party library styles are no longer working because css-loader doesn't allow named exports, hence

import('./styles.css').then((styles) => console.log(styles))

will yield something like styles.default.xxx instead of styles.xxx

A workaround would be setting namedExport option to be true in css-loader. This will enable me to access styles.xxx without the default. However if I set namedExport to be true in css-loader, I can no longer import classes with dashes (e.g. "btn-focused" because css-loader will convert it to "btnFocused" and the third party library refers to the styles as styles['btn-focused']). I see an option exportLocalsConvention in css-loader, however this option is restricted to 'camelCaseOnly' or 'dashesOnly' when namedExport is set to true, and both of these options do not help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伪心 2025-02-01 05:15:19

您是否尝试过样式加载程序？尝试以下配置！它在动态导入中起作用：

use: [
  {
    loader: 'style-loader',
    options: {
      esModule: false,
    },
  },
  {
    loader: 'css-loader',
    options: {
      esModule: false,
      modules: {},
    },
  }
]

随时让我知道是否有任何问题:)

Did you try style-loader? Give the following configuration a try! It works in dynamic imports:

use: [
  {
    loader: 'style-loader',
    options: {
      esModule: false,
    },
  },
  {
    loader: 'css-loader',
    options: {
      esModule: false,
      modules: {},
    },
  }
]

Feel free to let me know if there is any problem with it :)

回复收藏 0 原文

~没有更多了~