How to minify, complile and output your sass/scss to a specific file location

Speed up your dev process with a little config

Rob Johnson

By Rob Johnson

Fri Apr 29 2022

#tools#css

Using Sass or Scss is a great way to simplify the way you write css. However it requires compiling to css in order for it to be readable in a browser.

Here's how to set up automatic minification, compilation and output of the css file to a desired path.

Requirement: This assumes you're using VSCode.

Steps

  1. Install the VSCode Live Sass Compiler extension by selecting View + Extensions in the main menu and searching for Live Sass Compiler.
  2. Create a folder .vscode at the root of your project if it doesn't already exist
    • Create a file settings.json in the new .vscode
  3. Paste the following settings into your .vscode/settings.json file
{
  "liveSassCompile.settings.formats": [
      {
        // compress the css file
        "format": "compressed",
        // add .min.css as the extension
        "extensionName": ".min.css", 
        // define the output/save path
        "savePath": "~/../_site/assets/styles/"
      }
    ],
    "liveSassCompile.settings.excludeList": [
      "/_styles/!screen.sass",
      "**/node_modules/**"
    ],  
}

Additional settings and config are documented here in the Github repo.

# commerce 14 # seo 5 # tools 6 # amazon 1 # sql 4 # shopify 9 # javascript 13 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # monitoring 2 # api 6 # python 2 # aws 2