Reactjs 导入嵌套SCSS模块失败（盖茨比）

在盖茨比中，我试图将一个（嵌套的）SCSS模块导入组件（

project card.js

），但遇到了一个我无法解决的错误。我使用的是

gatsby plugin alias imports

，我的文件层次结构设置为：

| --> components
|     --> project
|         --> project-card.js
| --> styles
|     --> project
|         --> project-card.module.scss

当我尝试从“@styles/project/project card.module.scss”导入样式时，我得到一个未找到的

模块：无法解决{filepath}

错误

但是，如果我将SCSS模块在文件层次结构中向上移动一个级别（直接在

/styles

下），并使用

从“@styles/project card.module.SCSS”

导入样式，编译器将运行，我将看到预期的样式

我是否在配置方面遗漏了导致

模块未找到的内容

错误

----------

编辑：根据要求，

gatsby插件别名导入

配置：

const path = require('path')

module.exports = {
    plugins: [
        {
        resolve: `gatsby-plugin-alias-imports`,
            options: {
                alias: {
                    "@components": path.resolve(__dirname, 'src/components'),
                    "@images": path.resolve(__dirname, 'src/images'),
                    "@pages": path.resolve(__dirname, 'src/pages'),
                    "@styles": path.resolve(__dirname, 'src/styles')
                }
            }
        }
    ]
}

根据，如果您尝试以下操作，会发生什么情况：

const path = require('path')

module.exports = {
    plugins: [
        {
        resolve: `gatsby-plugin-alias-imports`,
            options: {
                alias: {
                    "@components": path.resolve(__dirname, './src/components'),
                    "@images": path.resolve(__dirname, './src/images'),
                    "@pages": path.resolve(__dirname, './src/pages'),
                    "@styles": path.resolve(__dirname, './src/styles')
                }
            }
        }
    ]
}

---

您如何在您的系统中使用

gatsby插件别名导入

config@ShubhamKhatri-刚刚用上面的我的配置更新了帖子。谢谢