main.scss 自动更新的问题

问题描述

这是我所有导入的 main.scss 文件...

@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

@import "components/bg-video";
@import "components/button";
@import "components/cards";
@import "components/composition";
@import "components/feature-box";
@import "components/form";
@import "components/story";

@import "layout/footer";
@import "layout/grid";
@import "layout/header";
@import "layout/navigation";

@import "pages/home";

在我的布局文件夹中创建@import“布局/导航”文件后，我开始遇到这个问题。除非我在包含 @imports 的 main.scss 中手动保存，否则它似乎没有自动重新加载。我下载了实时 sass 编译器以及 vs 代码上的 sass 扩展，并关闭了实时服务器和终端，我让一切都在运行。然后我开始在 vs 代码中使用这些扩展和集成终端......我检查了 node 和 npm 是否仍然安装，如果我执行 node-v 和 npm-v 来检查它是否安装，我得到 node 版本 v14。 15.3 和 npm 版本 6.14.9。我尝试在终端中使用 npm install -g node-sass 命令重新安装 node-sass，但出现权限被拒绝错误......该站点现在也完全没有响应，无法点击任何可点击的内容，并且没有任何变化如果我在文件中更改页面。我不知道如何解决这个问题，请帮忙。

解决方法

现在似乎是自动重新加载。我删除了所有 package.json、模块文件并重新安装了 node-sass 并在终端中设置了一个新的实时服务器。唯一的另一个问题是，由于某种原因，按钮和图片的动画都不起作用，我有两个 css 样式表，它们似乎相同，一个名为 style.css 一个名为 main.css，它们都位于我的包的 css 文件夹中.json script "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" },所以我删除了 main.css 文件和一个标记为 main.css.map 的文件

,

在 scss 文件前添加“_”。并签入 VS Code。

/scss
 main.scss
 layout/_header.scss
 layout/_footer.scss