首页 > 解决方案 > scss个别部分不更新实时服务器中的更改

问题描述

实时服务器不显示在单个 .scss 文件中所做和保存的更改,但这些更改是对 css.style.css 进行的。

预期的结果是每次我将代码添加到这些单独的文件前。(_header.scss) 它将反映在实时服务器中,实时显示所做的更改,例如更改背景颜色,但没有任何反应。

我对编码相当陌生,并且正在从 wordpress 主题转向使用 Visual Studio 代码。

拥有带有 node sass 的 Windows 10 操作系统,适用于使用 npm 运行的 Windows

我试过 Chrome,Shift+F5 刷新并清除缓存,仍然没有区别。

我的文件设置是我桌面上的一个文件夹,其中包含一个 html 文件、CSS 文件夹/style.css 和 images 文件夹

在项目中有 Sass 文件夹,_base.scss 用于字体和变量等。

 - main.scss file for the @imports
 - _header.scss
 - _navbar.scss
 - _services.scss for a services section on the website
 - _typoghraphy.scss

和其他类似文件

在json文件中有

        "watch:sass": "node-sass sass/main.scss css-style.css -w",
     "devserver": "live-server --browser=firefox",
    "start": "npm-run-all --parallel devserver watch:sass",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.css output-style compressed",
        "build": "npm-run-all compile:sass prefix:css compress:css"

例如,在单个 scss 文件中,我有这个

    .header {
    background-color: $color-secondary;
     }

但颜色不仅仅显示来自 html 的单词

CSS链接路径一定有问题吗?我如何确保链接从您的 scss 生成的新 CSS 文件

标签: csssass

解决方案


推荐阅读