import css 不适用于 Webpack 5 和 css loader 5 的带破折号的 class 名称

Question

正在尝试获取正在导入的第三方库 css 以与我的应用程序一起使用。

我正在使用 webpack v5 和 css-loader v5。由于从 webpack v4 升级到 v5，第 3 方库样式不再有效，因为 css-loader 不允许命名导出，因此

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

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

解决方法是在 css-loader 中将 namedExport 选项设置为 true。这将使我能够在没有默认设置的情况下访问 styles.xxx。但是，如果我在 css-loader 中将 namedExport 设置为 true，我将无法再导入带有破折号的类（例如“btn-focused”，因为 css-loader 会将其转换为“btnFocused " 并且第三方库将样式称为样式 ['btn-focused'])。我在 css-loader 中看到一个选项 exportLocalsConvention，但是当 namedExport 设置为 true 时，此选项仅限于 'camelCaseOnly' 或 'dashesOnly'，并且这两个选项都没有帮助。

Answer 1

你试过了吗style-loader？试试下面的配置吧！它适用于动态导入：

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

如果有任何问题，请随时告诉我:)

import css 不适用于 Webpack 5 和 css loader 5 的带破折号的 class 名称

import css does not work for class name with dashes for Webpack 5 and css loader 5

reactjs

webpack

css-loader

webpack-5

cra