浏览器中未加载样式和CSS

Question

我已经更新了 React 项目上的软件包版本，并且样式现在未加载。

在代码中我使用这样的样式：

    import styles from "../WrappersCommon.scss";
    ...
    <div className={styles["main-layout"]}>

在 webpack 配置中我有

       test: /.(scss)$/,
    use: [
      {
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
          },
        },
      },
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [postcssPresetEnv()],
          },
        },
      },
      "sass-loader",
    ],

终端中没有错误，我在应用程序中没有看到任何样式，它们甚至没有加载到浏览器中：

请帮忙，样式有什么问题吗？

Answer 1

你可以尝试使用这样的样式

<div className={styles.main_layout}>

而不是

<div className={styles["main-layout"]}>

请注意，我还将类名中的“-”替换为“_”。也在您的 scss 文件中更改它，然后再次检查。我希望它能解决问题，如果不能，我可以寻找其他解决方案。