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

Question

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

对于 typescript 支持和智能感知，我正在使用 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;
}

---

屏幕上的错误信息：

如您所见，背景颜色是正确的，消除错误会使网站正常运行。 因此，可以安全地假设该错误仅由 typescript 造成。我看过有关此的文章，例如这篇文章，他们在模块根目录中声明了一个 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" />

Answer 2

据我所知，你可以使用 module.scss 但你应该从 module.css 导入样式，而不是 module.scss。 这个对我有用。