Css 为什么我的main.scs无法导入其他文件

我在导入scss文件时遇到问题

我创建了一个名为，

main.scss

的文件，并在那里编写了一些代码

所有代码都运行良好，反映了网页

然后我创建了两个文件夹，设置和元素

在设置中，我创建了一个名为_colors.scss的文件，并定义了一些颜色变量

在elements中，我创建了一个名为“

”的文件，并定义了一些代码

现在我想把它们导入
main.scss

但他们无法导入。我不知道为什么。请帮帮我

这是我的最终代码

/src/css/main.scss
：

a {   
    line-height: inherit;
    cursor: pointer;
    border-bottom: 1px solid;
    text-decoration: none;
    color: $primary-colour;
    word-break: break-all;
    word-break: break-word;
    &:visited {
        border-bottom: 1px solid;
    }
    &:hover {   
        border-bottom: none;
    }
    &:active {   
        color: $primary-colour;      
    }
    &:focus {   
        border: none; 
    }
}

$primary-colour: rgb(32, 221, 174);

@import“元素/排版”；
@导入“设置/颜色”；

/src/css/elements/\u排版。scss
：

a {   
    line-height: inherit;
    cursor: pointer;
    border-bottom: 1px solid;
    text-decoration: none;
    color: $primary-colour;
    word-break: break-all;
    word-break: break-word;
    &:visited {
        border-bottom: 1px solid;
    }
    &:hover {   
        border-bottom: none;
    }
    &:active {   
        color: $primary-colour;      
    }
    &:focus {   
        border: none; 
    }
}

$primary-colour: rgb(32, 221, 174);

/src/css/settings/\u colors.scss
：

a {   
    line-height: inherit;
    cursor: pointer;
    border-bottom: 1px solid;
    text-decoration: none;
    color: $primary-colour;
    word-break: break-all;
    word-break: break-word;
    &:visited {
        border-bottom: 1px solid;
    }
    &:hover {   
        border-bottom: none;
    }
    &:active {   
        color: $primary-colour;      
    }
    &:focus {   
        border: none; 
    }
}

$primary-colour: rgb(32, 221, 174);

您的路径不正确。试试这个：

/src/css/main.scss

@import "./settings/_colors";
@import "./elements/_typography";


还要注意，
@import./settings/_colors”先走。因为你需要你的
$primary color
内置
@import./elements/_排版”
路径没有错误
main.scss
位于
css
目录中，包含
元素
和
设置
目录。导入分部代码时也不需要下划线。但是，您的顺序是正确的。您可以发布编译器输出吗？可能只是import语句的顺序。必须首先加载排版中使用的定义。