Skip to content

Instantly share code, notes, and snippets.

@andrew-rayco

andrew-rayco/watch-sass.md

Last active March 8, 2023 12:53
Show Gist options
  • Save andrew-rayco/0f94245718067affa0dc06f5ab3b998c to your computer and use it in GitHub Desktop.
Save andrew-rayco/0f94245718067affa0dc06f5ab3b998c to your computer and use it in GitHub Desktop.
Download ZIP
Watch CSS setup with node-sass and nodemon
Raw
watch-sass.md

Watch CSS setup with node-sass and nodemon

npm install --save-dev node-sass nodemon

Add the following scripts to package.json

Build CSS

"build-css": "node-sass -o css css"

// Where the first 'css' is the destination directory for compiled output.

// Second 'css' is the source folder with sass/scss files

// -o is shorthand for --output

e.g. "build-css": "node-sass --output [destination-directory-for-output] [sass-source-file-directory]"

Watch CSS

"watch-css": "nodemon -e sass -x \"npm run build-css\""

// Where the '-e sass' tells nodemon to monitor files with that extension. Shorthand for '--ext'

// (e.g. 'nodemon -e sass,scss' will watch both types of sass files and restart on changes)

// The '-x' (shorthand for '--exec') will execute the following script

@glippi
Copy link

glippi commented Oct 29, 2019 •
edited
Loading

Hello,

Thank you for the gist.

I'd suggest a little modification, that could save us the installation of nodemon.

If I'm not misunderstanding what you are doing in the gist, I think that these two npm scripts:

"scripts": {
    "build-css": "node-sass -o css css" ,
    "watch-css": "nodemon -e sass -x \"npm run build-css\""
}

are equivalent to this one:

"scripts": {
    "watch-sass":  "node-sass -w scss -o css"
}

Basically, node-sass is shipped with the functionality to watch on changes on sass files and output them in css (the names of the directories can be whatever you want of course ;) so we don't need to install nodemon to trigger the build on change.
More info here.

@Scorpovi4
Copy link

Scorpovi4 commented Feb 18, 2021 •
edited
Loading

That's working in terminal, but my express server doesn't start unfortunately with this comand -x \"npm run watch-scss\"

@glippi
Copy link

glippi commented Sep 4, 2021

Can you teach me how to use nodemon to build js.

I suggest you to have a look at vite: https://vitejs.dev.
It's a simple and yet very powerful tool to build your js project and also to work locally with all the things you would expect to have like auto reload on save etc.

@netsanetamanuel
Copy link

how can i reactivate nodemon, it is not working after while

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment