I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.

Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.

Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?

Currently, I use HTML, CSS, SCSS, and Javascript

Thanks,

CodePudding user response：

Install Live Sass Compiler extension if you are using vscode

CodePudding user response：

Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki

Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.

Install sass package:

npm install sass --save-dev

In the package.json file's scripts section, add these:

"scripts": {
    "sass-dev": "sass --watch --update --style=expanded assets/css",
    "sass-prod": "sass --no-source-map --style=compressed assets/css"
},

Run scripts:

npm run sass-dev
// or
npm run sass-prod

What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.

The above is a very basic setup to compiling SCSS files and "watching" them for changes