CODEWITHSUNDEEP
htmlcsssass
Jasmeen Maradeeya
Jasmeen Maradeeya

Reputation: 188

Convert SCSS to CSS automatically on live server

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,

Upvotes: 3

Views: 3436

Answers (2)

vsync
vsync

Reputation: 130165

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

Learn more about the package and its CLI

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. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.

Upvotes: 0

Anbuselvan Annamalai
Anbuselvan Annamalai

Reputation: 626

Use sass package instead of VSCode Extensions like Live SASS Compiler.

Why should not we use "Live SASS Compiler" VSCode extension?

  1. Live SASS Compiler extension is old and hasn't been updated for a while.
  2. Some features like @debug, @warn, @error won't work, so if you are using it, you have to use the sass npm package for that.

So, How to install the sass package?

  1. So simple, just run these commands.
npm install -g sass
  1. And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css

More information is available on the sass docs here

Upvotes: 2

Related Questions