您需要将gatsby-plugin-root-import添加到gatsby-config.js中，以便使用绝对导入。
Webpack 4在其配置中提供了别名，通过别名可以指定从特定文件夹的绝对导入。gatsby-plugin-root-import插件可以帮助您实现该配置
首先使用安装

npm install --save-dev gatsby-plugin-root-import

或

yarn add --dev gatsby-plugin-root-import

然后在gatsby-config.js中进行如下配置

// gatsby-config.js
const path = require('path')

module.exports = {
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        "components": path.join(__dirname, "src/components"),
        "layouts": path.join(__dirname, "src/layouts"),
        "templates": path.join(__dirname, "src/templates"),
        "scss": path.join(__dirname, "src/scss"),
        "types": path.join(__dirname, "src/types"),
        "src": path.join(__dirname, 'src'),
        "pages": path.join(__dirname, 'src/pages')
      }
    }
    ...
  ]
}

Shubham的解决方案在2021年6月仍然有效a-如果你想让它自动解析src下的所有目录，你可以使用我为此编写的两行代码：

const fs = require("fs");
const path = require("path");

const srcDirs = fs.readdirSync(path.resolve(__dirname, "src"));

const rootDirsConfig = {};

srcDirs.forEach((srcDir) => {
    rootDirsConfig[srcDir] = path.resolve(__dirname, "src", srcDir);
});

module.exports = {
    plugins: [
          {
            resolve: "gatsby-plugin-root-import",
            options: rootDirsConfig,
          },
    ]
}

安东尼·帕皮耶夫斯基的答案仍然有效。
如果您使用TypeScript，那么只需将IPluginRefOptions类型添加到rootDirsConfig中，如下所示：

import { IPluginRefOptions } from 'gatsby';
import path from 'path';
import fs from 'fs';

const srcDirs = fs.readdirSync(path.resolve(__dirname, 'src'));

const rootDirsConfig: IPluginRefOptions = {};

srcDirs.forEach((srcDir) => {
  rootDirsConfig[srcDir] = path.resolve(__dirname, 'src', srcDir);
});