“找不到模块 './style' 或其相应的类型声明”错误，打字稿 linter

Question

我正在构建一个带有 type User struct { name string Password Password } 和 css-modules 的 Gatsby 项目，我在其中解析了 gatsby-config.js 扩展。

它可以构建并且效果很好，但是我的 linter 不同意这一点，当出现错误“找不到模块 './style' 或其相应的类型声明.ts(2307)”时我尝试导入这样的样式：

如果我从 js/ts/jsx/tsx 文件导入没有错误，但是当我尝试导入像模块这样的样式（或图像）时，如果没有正确的扩展名，它会触发这个错误。

我已经尝试在项目根目录的“typings”文件夹中将扩展声明为模块，例如“声明模块“*.scss””，但没有成功。

我的.scss

gatsby-config.js

我的const path = require('path'); const isDev = process.env.NODE_ENV === 'development'; module.exports = { siteMetadata: { title: 'Title from siteMetadata', }, plugins: [ { resolve: `gatsby-plugin-sass`, options: { cssLoaderOptions: { sourceMap: isDev, modules: { mode: 'local', localIdentName: '[local]--[hash:base64:5]', }, }, }, }, { resolve: 'gatsby-plugin-alias-imports', options: { alias: { '@containers': path.resolve(__dirname, 'src/containers'), '@components': path.resolve(__dirname, 'src/components'), '@pages': path.resolve(__dirname, 'src/pages'), }, extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss'], }, }, ], };

tsconfig.json

我的{ "compilerOptions": { "strict": true, "outDir": "./build/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es6", "jsx": "react", "allowSyntheticDefaultImports": true, "esModuleInterop": true, "baseUrl": ".", "paths": { "@containers/*": ["src/containers/*"], "@components/*": ["src/components/*"], "@pages/*": ["src/pages/*"] } } }

.eslintrc.js

如果您提供帮助，我将不胜感激。至少，也许有一些方法可以关闭这个 ts 规则？

Answer 1

如果您的目录结构是 src/style/**/*.scss

将 "baseUrl": "." 文件中的 "baseUrl": "src" 更改为 tsconfig.json。

或更新tsconfig.json

定义“.scss”类型的位置。

  "include": [
    "./typings/type.d.ts",
  ],

Answer 2

在根目录下创建一个文件 next-env.d.ts 并将以下语句添加到该文件中

 declare module '*.css'

在添加上述语句之前

添加语句后