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

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

导入嵌套的SCSS模块失败（Gatsby）

1 个答案: