如何使用@use 和@forward 导入sass 上的代码块？

Question

我开始使用 sass，但在导入位于多个文件中的代码块时遇到问题。我不能使用“@import”，而是文档说要使用“@use”或“@forward”；但它不适用于我的网格。

_links.scss *（有效）

/* unvisited link */
a {
  color: red;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: red;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: red;
}

_grid.scss *（这行不通）

.grid {
  max-width: 1920px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "h h h"
    "c c c"
    "f f f";
  header {
    grid-area: h;
  }
  main {
    grid-area: c;
  }
  footer {
    grid-area: f;
  }
}

main.scss *主要

@use "./base/links"; // it works!.
@use "./base/grid"; // it does not work
@forward "./base/grid"; // it does not work

为什么网格块很重要？

Answer 1

应该可以。

检查您的页眉/主体/页脚是否在具有 class 名称网格的元素内。

@use 在您的情况下应该与 import 一样工作。

您的 DOM 结构如何？

如何使用@use 和@forward 导入sass 上的代码块？

How to import a code block on sass with @use and @forward?

css

sass