main.scss 自动更新问题

Question

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

Answer 1

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

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

Answer 2

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

的文件

main.scss 自动更新问题

Issue with main.scss updating automatically

terminal

sass

node-modules

npm-live-server