无法使用scss中的变量

Question

我创建了一个名为

colors.scss

的文件，后来又创建了另一个名为

header.scss

的文件。然而我在

header.scss

中使用的变量原本是在

colors.scss

中定义的，无法实现。

我有一个名为

colors.scss

的文件，其中包含：

$first: white;
$second: #090c31;
$third: #5853ff;
$dark: rgb(44, 44, 44);
$text1: "Roboto";
$text2: cursive; 

然后我制作了另一个文件，名为

header.scss

：

@import "colors";

nav {
  width: 100%; 
  padding: 1rem; 
  display: flex; 
  justify-content: space-between;
  align-items: center;
  position: sticky; 
  background-color: $first;
  top: 0%; 
  z-index: 10;

  > h1 { text-transform: uppercase; }

  > main {
    width: 70%; 
    display: flex;
    justify-content: flex-end;

    > a {
      color: $dark;
      margin: 1rem;

      &:hover { color: $third; }
    }
  }
}

但是我在

header.scss

中使用的变量没有被实现。

Answer 1

确保colors.scss的路径准确且不包含拼写错误或不必要的字符。 考虑使用相对路径：

@import "./colors";