Node-sass creates extra files in watch mode

Question

I import all my SCSS styles into a index.scss file using @import. This works fine when I build css manually using npm run build-css:

"scripts": {
    //Other scripts
    "build-css": "node-sass src/scss/index.scss -o dist/css/",
  }

When I run node-sass in watch mode it updates the /dist/css/index.css just fine but also creates the css in the dist folder for the original scss file that I edited and imported in the src/scss/index.scss

"scripts": {
        //Other scripts
        "build-css": "node-sass src/scss/index.scss -o dist/css/",
        "watch-css": "npm run build-css && node-sass src/scss/index.scss -o dist/css/ -w src/scss/**/*.scss --include-path src/scss/imports/*.scss"
      }

My src/scss/index.scss looks as follows:

@import "./imports/bootstrap.min";
@import "./imports/contacts";

So, if I edit contacts.scss in watch mode node-sass updates the ./dist/css/index.css but also creates an extra contacts.css in the dist/css folder.

Is there a way I can have node-sass update only the dist/css/index.css and not build the imports into the dist folder?

Yes -w can watch for specified files. But my issue is I want to watch all the files but build only the index.css — JSNinja, Dec 12 '16 at 11:11
I tried npm run build-css && node-sass src/scss/index.scss -o dist/css/ -w src/scss/index.scss but still the same result — JSNinja, Dec 12 '16 at 11:13
What I meant is that I think the -w flag runs the compiler on all the files that change — JordyvD, Dec 12 '16 at 12:16
Yes that is true. Is there a way I can detect changes in all the scss files and restrict the build to only index.scss? — JSNinja, Dec 12 '16 at 13:04

score 0 · Answer 1 · edited Oct 24 '19 at 23:22

0

Change the filename contacts.scss to _contacts.css; the compiler ignores the underscored files.

edited Oct 24 '19 at 23:22

Das_Geek

2,775
7
20
26

answered Oct 24 '19 at 17:19

Edwin

1

Node-sass creates extra files in watch mode

1 Answers1