解构 CSS 模块导入答案

【问题标题】：Destructuring CSS module import解构 CSS 模块导入
【发布时间】：2022-03-09 00:52:38
【问题描述】：

我在我的 React 应用程序中使用 CSS 模块。今天我正在尝试编码并且不得不升级一些依赖项 - 从 17.0.1 到 17.0.2 的反应，从 4.0.3 到 ^5.0.0 的反应脚本，从 ^7.32.0 到 8.0.0 的 eslint - 我有一堆错误。我设法修复了很多，但我遇到了很多像这样的错误：

在“./Header.module.css”中找不到导出“headerImageWrapper”（导入为“headerImageWrapper”）（可能导出：默认）

我一直在从 CSS 模块中导入解构的类 - 它一直工作到今天。

import React from 'react';
import logo from '../../assets/logo.png';
import {
  headerWrapper,
  headerImageWrapper,
  headerLogo,
  headerTitleWrapper,
} from './Header.module.css';

export default function Header() {
  return (
    <div className={headerWrapper}>
      <div className={headerImageWrapper}>
        <img className={headerLogo} src={logo} alt="Logo" />
      </div>
      <div className={headerTitleWrapper}>
        <p>Biblioteca</p>
        <p>Colégio</p>
      </div>
    </div>
  );
}

当我将它作为“样式”导入时它确实有效，但我想保持它的解构，所以我不必使用“styles.headerWrapper”

【问题讨论】：

还有一件事：文件名是正确的，我已经检查过了，它与“样式”完美配合。此外，它还警告我每个文件中的所有类。
升级到 react-scripts 5.0.0 后我也遇到了同样的问题。您是否能够在不更改导入的情况下找到解决方案？

标签： css reactjs react-native destructuring css-modules

【解决方案1】：

我遇到了同样的错误，不想恢复到styles.myStyle。所以现在我仍在导入整个样式对象import styles from "./blah.module.css"，但随后我解构了const {styleOne, styleTwo} = styles; 之后的变量。这使您可以保持其他一切不变，但仍然有点烦人。

【讨论】：