在app.scss (main.scss)中，SCSS路径不处理混音或变量。

Question

我对SCSS的路径有问题。我有文件夹结构。你可以看到它的第一个图像。问题是我在app.scss中导入了所有的scss。组件的文件可以工作，但是组件的页面不会读取mixin和variables。首先，我认为这是语法错误，但我找不到它。

​

​

我的app.scss

@import "./abstracts/variables.scss";
@import "./abstracts/mixins.scss";

@import "./components/Header.module.scss";
@import "./components/Footer.module.scss";

@import "./pages/Home.module.scss";

如果我用$mainColor编写Header.module.scss，就没有问题，而且应用程序也能工作。但是在pages文件夹中，我必须写@import，我不想写它。

Home.module.scss

@import "../abstracts/variables.scss";
@import "../abstracts/mixins.scss";

.main-section {
  .main-section-context {
    @include flex-box(center, center);
    
  }
}

如果我删除了import，屏幕就会显示

SassError: Undefined mixin.
   ╷
13 │     @include flex-box(center, center);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles\pages\Home.module.scss 13:5  root stylesheet

Answer 1

好的，我在这里吐口水，因为我不完全理解你的项目，但要确保你的进口顺序是正确的。例如，如果您在回家后导入变量，那么home将不会读取它。看起来这并不是问题的具体所在