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

2020年07月13日 2072Browse 0Like 0Comments

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

SASS Preprocess for CSS

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:

  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>
       

Sunflower

Stay hungry stay foolish

Comments