使用 SASS 编译器时出现 VS 代码编译错误答案

【问题标题】：VS Code Compilation error while using SASS compiler使用 SASS 编译器时出现 VS 代码编译错误
【发布时间】：2021-02-24 10:26:30
【问题描述】：

抱歉，如果以前有人问过这个问题，我一生都无法解决这个问题。不过，我是编码新手，所以这可能是一个主要因素。

我正在使用最新的 vs code 和 Ritwick Dey live sass 编译器 3.0。

我最近开始了一个新项目，并且遇到了 sass 编译器的问题。我已经用 ATOM 和 Brackets 测试了我的代码，它们运行良好，但是 vs 代码抛出了以下编译错误：

Error: no mixin named breakpoint-down
        on line 61 of Users/simon/Documents/Training/Web Design/Frontend Mentor Challenges/easybank-landing-page-master/scss/_globals.scss
        from line 1 of sass/Users/simon/Documents/Training/Web Design/Frontend Mentor Challenges/easybank-landing-page-master/scss/main.scss
>>   @include breakpoint-down(medium) {

   -----------^

变量也会发生这种情况，但无法识别它们。当我对所有文件进行更改时，它们可以编译并显示在 main.css 文件中。

我加载了一个以前的项目，它确实可以识别变量和 mixins，但是我以相同的方式复制了所有内容，文件结构完全相同，所以我现在需要帮助。

提前致谢。

【问题讨论】：

标签： visual-studio-code sass compiler-errors

【解决方案1】：

似乎缺少 mixin 的文件没有包含在样式表本身中。

所以你可以检查是否 @import 'mixins' 已添加到样式表中，位于您调用 mixin 的文件之前。

（只是一点点评论，因为我们本周有这个：我不相信这是原因。但是您使用的编译器不再受支持，尽管它仍然很受欢迎。在两者之间有一个更快的替代方案或相同的编译器可以从 github 中的另一个 respirotory 加载。见：Live Sass Compiler - @use causes compilation error)

【讨论】：

谢谢布雷伯。您的回答帮助我了解发生了什么并能够解决它。

【解决方案2】：

我发现了问题。

似乎编译器会按照文件放在 main.scss 文件中的顺序编译文件。由于我在底部有我的 mixins 和变量文件，因此出现错误消息并停止导入过程并给出编译错误。

走错路

@import "globals";
@import "header";
@import "mixins";
@import "variables";

正确的方法

@import "mixins";
@import "variables";
@import "globals";
@import "header";

我希望这可以帮助遇到同样问题的其他人。

【讨论】：