Skip to content

setup sass preprocessor, extension and auto web-kit css setup

Notifications You must be signed in to change notification settings

hasnat-shohag/webkit-and-sass-setup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 

Repository files navigation

All you need to setup for post css and sass preprocessor set up

Sass Install and Setup to the directory

  • Extension: Live Sass Compiler

  • Install-Command:

      sudo npm install -g sass
    
  • Link the directory:

      sass --watch assets/sass/style.sass assets/styles/style.css
    

Live Sass Compiler Workspace Settings:

{
    "prettier.tabWidth": 4,
    "liveSassCompile.settings.autoprefix": [],
    "liveSassCompile.settings.includeItems": ["/assets/sass/style.sass"],
    "liveSassCompile.settings.formats": [
        { 
            "format": "compressed", 
            "extensionName": ".min.css",
            "savePath": "/assets/styles" 
        }
    ]
}

Webkit Install Process

  • Install-command:

      npm i -G postcss postcss-cli
    
  • Also Install:

      npm i -D postcss-preset-env
    
  • Usage-command:

      npx postcss assets/styles/style.css -o assets/styles/output.css -w
    
  • At last:

      npm install
    

Create File to the Main directory

  • File Name: postcss.config.js

  • Setup:

      module.exports = {
          plugins: [require("postcss-preset-env")],
      };
    
  • File Name: .browserslistrc

  • Setup:

      last 5 versions
      >0.5%
      IE 10