“找不到模塊‘./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。 這個對我有用。