无法识别由部分文件导入的部分文件上的变量

Question

当我在 style.scss 上导入部分文件时。它工作正常。所有变量工作正常。

style.scss

@import 'base/variable';

//Component
@import 'component/menubar';
@import 'component/menubar-mascot';
@import 'component/menubar-count';
@import 'component/menubar-button';

但是当我尝试合并菜单栏 scss 部分文件时，像这样

style.scss

@import 'base/variable';

//Component
@import 'component/menubar';

menubar.scss

@import 'menubar-mascot';
@import 'menubar-count';
@import 'menubar-button';

variable.scss 上的变量无法读取，但是当我再次导入 menubar.scss 上的variable.scss 时，就像这样

menubar.scss

@import '../base/variable';
@import 'menubar-mascot';
@import 'menubar-count';
@import 'menubar-button';

它工作正常，为什么？以及如何在不再次导入variables.scss 上的menubar.scss 的情况下解决此问题？

Answer 1

我假设 menubar-mascot 位于您运行 sass 命令的位置。 由于某种原因，似乎找不到嵌套导入中的绝对路径。

@import 'menubar-mascot';
@import 'menubar-count';
@import 'menubar-button';

但是，如果您使用相对的，它确实会找到它。因此，相对于您的捆绑 scss 文件，您可以执行以下操作：

@import '../menubar-mascot';
@import '../menubar-count';
@import '../menubar-button';

因此它会从组件文件夹回到根目录并找到正确的文件。