Steps to Use Sass CSS Preprocessor in Native html, React.js, Vue.js

Sass: Syntactically Awesome Style Sheets is the most mature, stable, and powerful professional grade CSS extension language in the world.

1. Steps to use sass in Native html

1. Install sass globally by npm

   sudo npm install sass -g

2. Create separate folders to put .scss and .css files

3. Watch .scss files and compile them to .css real-time

   • Monitor and sync compile single .scss file

     sass --watch input.scss output.css

   • Monitor and sync compile .scss file to .css in its own directory

     sass --watch from/scss:to/css

   • Or use an extention in VsCode to compile:

     • live-sass-compiler: Compile Sass or Scss to CSS at realtime with live browser reload.
     • easy-sass: Built-in, easy to use Sass compiler

4. Link the .css file in the header of html document:

      <link rel="stylesheet" href="css/index.css" />
     

2. Steps to use sass in React

1. Install node-sass as dependency for React

   npm install node-sass -S

2. Change file extension .css to .scss

3. Import the .scss files in React component:

      import "components/Application.scss"
      

or read the React official tutorial here

3. Steps to use sass in Vue.js

1. Install npm packages as development dependency:

   npm install node-sass sass-loader -D

   or setup to use them when creating Vue app via vue-cli scaffold tool. You can pick a preset manually and choose a CSS Preprocessor tool while running the vue-cli scalffold. If you choose SASS/SCSS, node-sass and sass-loader will be installed automatically when the project is created.

   npm install -g vue-cli
   vue create appname
   Vue CLI v4.4.6
   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: Babel, CSS Pre-processors, Linter
   ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
     Sass/SCSS (with dart-sass) 
   ❯ Sass/SCSS (with node-sass) 
     Less 
     Stylus 
   

2. Add lang="scss" in the style tag of the Vue component:

      <style lang="scss">
          /* SCSS code */
      </style>