“找不到模块‘./something.module.scss’或其相应的类型声明

Question

我正在尝试将 scss 模块与反应打字稿一起使用。这个功能应该从react-scripts@2.0.0及更高版本中融入到React中，正如他们网站上所说的那样。

对于打字稿支持和智能感知，我使用typescript-plugin-css-modules模块。

将鼠标悬停在类名的 css 导入上效果很好：

这是我的代码：

---

src/pages/homePage/homePage.tsx

import styles from './styles.module.scss';
 
const HomePage = () => {
    return <div className={styles.myStyle}>Home page</div>;
};
    
export default HomePage;

---

src/pages/homePage/styles.module.scss

.myStyle {
    color: red;
}

---

屏幕上出现错误消息：

正如您所看到的，背景颜色是正确的，消除错误使网站可以正常工作。因此，可以安全地假设该错误仅由打字稿造成。我看过有关此的文章，例如这篇文章，他们在模块根目录中声明了一个 style.d.ts 文件，用于声明 css 模块，其中包含以下内容：

// For SCSS
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

但是，这会产生错误，因为类已定义，因为该文件已由反应脚本创建：

node_modules/react-scripts/lib/react-app.d.ts

[...]

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

[...]

因此，由于 React-scripts 已经为我创建了这些，并且我正在使用typescript-plugin-css-modules模块，所以一切都应该没问题。我在代码编辑器中没有收到任何红线或错误，仅在网站中收到。

希望有人能给出解决方案，先谢谢了！

Answer 1

我找到了答案。使用create-react-app后我不小心删除了react-app-env.d.ts。为了使用 CSS 模块，它必须存在。如果你的项目也缺少这个文件。将其添加到您的 src 文件夹并写入

/// <reference types="react-scripts" />