【发布时间】：2020-06-16 10:38:01
【问题描述】：
我是 SASS 的新手，所以请原谅我的术语和理解。我正在浏览 youtube 上的一些教程，这很棒，视频名为“在 20 分钟内学习 Sass | Sass 速成课程”。我正在使用 Visual Studio 代码，让我感到困惑的是他让我创建一个 _header.scss 文件以及 _variables.scss 作为主要 style.scss 的扩展名的部分。 style.scss 中的标头是 @import 'header'；从 _header.scss 使用 @mixin 变量。
我在 Visual Studio 代码上运行实时服务器，它不会更新，直到我手动保存我更改的所有文件，然后最后保存“style.scss”。有没有办法我可以说修改 _header.scss 文件和 _variables.scss 并让它自动更新 style.scss？
如果这没有意义，我会这样说。我的主 style.scss 文件中有一个 mixin 变量和其他“$变量”。当我对 _variable.scss 文件和 _header.scss 进行更改时，有没有办法可以保存它们并让它自动更新 style.scss 文件？必须通过并将它们全部保存以使其进行一次更新非常耗时。
我尝试从在线教程中以多种方式在 VS 代码中为“全部保存”创建一个键。没有任何效果。我希望我是有道理的，我很难解释对此的新手。谢谢
style.scss
@import 'variables';
@import 'header';
.contact {
@include flexCenter(row, grey);
}
_header.scss
@mixin flexCenter($direction, $background) {
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
background: $background;
}
header {
@include flexCenter(row, rgb(31, 28, 28));
color: $textColor;
h1 {
color: $textColor;
}
button {
background: $primaryBtn;
&::after {
content: "o";
}
}
}
_variables.scss
$textColor: brown;
$primaryBtn: pink;
【问题讨论】：
-
您的意思是“更新 style.CSS”而不是 SCSS？没有理由更新部分文件（下划线文件，例如
_variables.scss）来更新 style.SCSS 文件。应该发生什么，当您对部分进行更改时，您编译的 CSS 文件应该得到更新。 -
是的，我认为你这样说是对的。当我更新部分并按保存时，没有任何变化。然后我必须转到 style.scss 并单击保存以更新 style.css。它应该自动更新吗？不适合我
-
是的，当您更新任何部分时，它应该会自动重新编译您的
style.CSS文件。检查您的 VSC 设置以确保它也在监视您的局部变化。没有理由每次都必须重新保存style.SCSS -
所以我对“_header.scss”进行了更改并将颜色更改为绿色。按下保存，编译器显示“检测到更改... _header.scss -------------------- 正在编译 Sass/Scss 文件：------ -------------- 正在观看... --------------------" 我的 style.css 没有任何变化。我该怎么办？
-
是的，我对部分所做的任何更改，编译器都会显示检测到的更改并说：“正在编译 Sass/Scss 文件：但在我点击保存 style.scss 之前，什么都不会更新。如果有人知道一个指向我的解决方案，我将不胜感激！
标签： css visual-studio-code sass