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

格雷姆·布赖森

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

按照此答案,如果尝试以下操作会发生什么:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章