导入嵌套 SCSS 模块失败 (Gatsby)

Question

在 Gatsby 中，我试图将一个（嵌套的）SCSS 模块导入到一个组件中 (project-card.js)，但遇到了一个我无法解决的错误。我正在使用 gatsby-plugin-alias-imports，我的文件层次结构设置为：

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

当我尝试 import styles from "@styles/project/project-card.module.scss" 时，出现 Module not found: Can't resolve {filepath} 错误。

但是，如果我将 SCSS 模块在文件层次结构中向上移动一层（直接在 /styles 下）并使用 import styles from "@styles/project-card.module.scss"，编译器会运行并且我会看到预期的样式。

我是否遗漏了导致 Module not found 错误的配置？

————————————

编辑：根据要求，gatsby-plugin-alias-imports 配置：

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')
                }
            }
        }
    ]
}

Answer 1

根据，如果您尝试会发生什么：

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')
                }
            }
        }
    ]
}

导入嵌套 SCSS 模块失败 (Gatsby)

Importing nested SCSS module fails (Gatsby)

reactjs

gatsby