[英]“Cannot find module './style' or its corresponding type declarations” error, typescript linter
I'm building a Gatsby project with css-modules
and gatsby-config.js
, where I resolve a .scss
extension.我正在使用
css-modules
和gatsby-config.js
构建一个 Gatsby 项目,我在其中解析.scss
扩展名。
It builds and it works great BUT my linter doesn't agree with this, firing an error " Cannot find module './style' or its corresponding type declarations.ts(2307) " when I try to import styles like that:它构建并且效果很好但是我的 linter 不同意这一点,当我尝试像这样导入 styles 时,会触发错误“找不到模块'./style'或其相应的类型声明.ts(2307) ”:
No errors if I'm importing from js/ts/jsx/tsx files but when I try to import styles (or images) like modules, without a proper extension, it fires this error.如果我从 js/ts/jsx/tsx 文件导入,则没有错误,但是当我尝试导入 styles(或图像)之类的模块时,没有适当的扩展名,它会触发此错误。
I already tried to declare extensions as modules inside a "typings" folder in the root of the project, like "declare module "*.scss"", didn't work.我已经尝试将扩展声明为项目根目录中“类型”文件夹中的模块,例如“声明模块“* .scss””,但不起作用。
My gatsby-config.js
我的
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'],
},
},
],
};
My tsconfig.json
我的
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/*"]
}
}
}
My .eslintrc.js
我的
.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'],
},
],
},
};
I would be grateful for your help.我会很感激你的帮助。 At least, maybe there's some method to turn this ts-rule off?
至少,也许有一些方法可以关闭这个 ts 规则?
If your directory structure is src/style/**/*.scss
如果你的目录结构是
src/style/**/*.scss
change "baseUrl": "."
更改
"baseUrl": "."
to "baseUrl": "src"
in tsconfig.json
file.到
tsconfig.json
文件中的“baseUrl "baseUrl": "src"
。
Or Update tsconfig.json
或更新
tsconfig.json
Where the ".scss" type is define.定义“.scss”类型的位置。
"include": [
"./typings/type.d.ts",
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.