You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React+TypeScript项目导入SCSS模块遇ts(2307)错误求助

React+TypeScript项目导入.scss模块触发ts(2307)错误的解决请求

我在React+TypeScript项目中创建了.scss模块,尝试在.tsx文件中通过import styles from './Input/Input.module.scss';导入时,持续触发ts(2307)错误。

已尝试以下所有方法,但错误仍在VSCode编辑器中持续显示:

  • 重新安装Sass、@types/sass和css-modules
  • 更新所有项目依赖
  • 将当前项目的src文件夹复制到可正常导入.scss的项目中
  • 创建包含模块声明的declaration.d.ts文件

附上项目的package.json和tsconfig.json配置信息,请求解决该问题:

package.json内容

{
  "name": "challenge",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.11.19",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "classnames": "^2.3.2",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "eslint": "^8.33.0",
    "eslint-plugin-react": "^7.32.2",
    "sass": "^1.58.0",
    "typescript-plugin-css-modules": "^4.1.1"
  }
}

tsconfig.json内容

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

内容的提问来源于stack exchange,提问作者augusto.p1

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 20:20:54