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

【问题标题】：Importing nested SCSS module fails (Gatsby)导入嵌套 SCSS 模块失败 (Gatsby)
【发布时间】：2019-12-11 00:30:54
【问题描述】：

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

【问题讨论】：

你如何在配置中使用gatsby-plugin-alias-imports
@ShubhamKhatri - 刚刚用我上面的配置更新了帖子。谢谢

标签： reactjs gatsby

【解决方案1】：

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

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

【讨论】：