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

【问题标题】："Cannot find module './style' or its corresponding type declarations" error, typescript linter“找不到模块 './style' 或其相应的类型声明”错误，打字稿 linter
【发布时间】：2021-05-03 21:31:43
【问题描述】：

我正在使用 css-modules 和 gatsby-config.js 构建一个 Gatsby 项目，我在其中解决了一个 .scss 扩展。

它可以构建并且效果很好，但是我的 linter 不同意这一点，当我尝试导入这样的样式：

如果我从 js/ts/jsx/tsx 文件导入，则不会出现错误，但是当我尝试导入样式（或图像）之类的模块时，如果没有适当的扩展名，则会触发此错误。

我已经尝试将扩展声明为项目根目录中“typings”文件夹中的模块，例如“声明模块“*.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

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'airbnb',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    indent: ['error', 2],
    'no-unused-vars': 'warn',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'react/prop-types': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],
  },
};

感谢您的帮助。至少，也许有一些方法可以关闭这个 ts-rule？

【问题讨论】：

标签： reactjs typescript webpack tslint css-modules

【解决方案1】：

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

 declare module '*.css'

在添加上述语句之前

添加语句后

【讨论】：

那么奇怪的是，如果我关闭 next.env.d.ts 文件，我会再次收到错误消息。这有什么意义？
@loekTheDreamer 你找到解决方案了吗？
@Christian 还没有，我正在使用 require，很烦人。
@loekTheDreamer 制作一个 jsconfig.json。 code.visualstudio.com/docs/languages/jsconfig 确保 include 属性指向包含 next-env.d.ts 的目录（所以 root，“*/”）

【解决方案2】：

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

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

或更新tsconfig.json

“.scss”类型在哪里定义。

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

【讨论】：

不幸的是，这没有帮助。我的目录结构就像src/components/some-component/style.scss
@tjnk24 尝试将import style from './style' 更改为import style from './style.scss'。
这就是问题的重点。我配置了 gatsby，就像我不需要显式编写扩展一样，在 gatsby-plugin-alias-imports 选项中使用“resolve-extensions”数组。而且效果很好。我想要的是摆脱那个虚假的错误。
@tjnk24 更新答案，你可以试试。
仍然不起作用，我已经有一个带有 extensions.d.ts 的文件夹“typings”，我在其中声明扩展名如下：declare module '*.scss' { const value: Record<string, string>; export default value; } 当我使用显式编写的扩展，例如 import style from './style.scss';，但不是没有它。