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 11 # seo 5 # tools 5 # sql 4 # javascript 12 # shopify 6 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # monitoring 2 # api 4 # python 2 # aws 2