Changes not occur unless main.scss is saved | SASS

Question

I have main.scss file that imports all other scss files. But whenever I make changes in "pages/band" file, no changes occur unless I save main.scss everytime. I'm running live-server

EDIT: Here is package.json file

{
  "name": "bootstrap_startup",
  "version": "1.0.0",
  "description": "Bootstrap startup",
  "main": "index.js",
  "scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
  },
  "author": "Zain",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.11.0"
  }
}

main.scss

@import "abstract/mixins";
@import "abstract/variables";

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

@import "components/cards";
@import "components/footer";

@import "pages/band";
@import "pages/home";

user_3538319 · Answer

For any kind of auto refresh functionality to work on a packaged local server solution, your tool is always going to need to know what files to watch for changes.

live-server is the same way. You need to tell it what files to watch for updates. When you initialize live-server you can use the --watch=PATH flag to tell it what files to watch for updates.

user_13384097 · Answer

I found that after you adding a new @include in main.scss file you must restart once sass compiler script so that it fetch the changes to it. It works for me.

Changes not occur unless main.scss is saved | SASS

2 Answers