Web assets compiler

A VSCode Extension that help you to compile SASS/SCSS files to CSS files.

Features

• Use js-beautify as SCSS/CSS/JS/HTML formatter
• Compile SASS/SCSS to CSS
• Autoprefix support for CSS
• Live compile when save file or partial files
• Customize format of export files
• Customize compile options for a file/folder

Usage/Shortcuts

1. Open command by press F1 or Ctrl + Shift + P (Cmd + Shift + P on MAC) and type Web assets compiler: Compile This File to compile opening file.
2. Open command by press F1 or Ctrl + Shift + P (Cmd + Shift + P on MAC) and type Web assets compiler: Compile All to start compiler.
3. Open command by press F1 or Ctrl + Shift + P (Cmd + Shift + P on MAC) and type Web assets compiler: Generate config file to save settings to config file in workspace root folder.

Extension Settings

• You can use VS Code configurations or .webassetcompiler.json file at root of work folder.
• .webassetcompiler.json will overwrites VS Code configurations
• All changed in VS Code configurations will be reflected in .webassetcompiler.json if file is exists

VSCode settings

{
    // enable/disable compile on save
    // default is true
    "webAssetsCompiler.compileOnSave": true,
    // export format list
    "webAssetsCompiler.exportFormats": [
        {
            // export style, expanded/compressed
            "format": "expanded",
            // output file extension (without dot)
            "extension": "",
            // enable/disable export source mapping
            // default is false
            "sourceMap": false
        }
    ],
    // list of watching folders
    "webAssetsCompiler.targetFolders" : [
        {
            // watching folder, relative path from work folder
            "input": "",
            // output folder, relative path from work folder
            "output": "",
            // watching all sub folder or not
            // default is true
            "includeSubFolder": true,
            // file name regex of include list
            // include all files if this value isn't set
            "includePattern": "",
            // file name regex of exclude list
            // no file is excluded if this value isn't set
            "excludePattern": "",
            // type of input file, SASS/SCSS
            // file extension will be used to check language name if this value isn't set
            "languageName": "",
            // same as `webAssetsCompiler.exportFormats`
            // `webAssetsCompiler.exportFormats` will be used if this value isn't set
            "formats": [
                {
                    "format": "expanded",
                    "extension": "",
                    "sourceMap": false
                }
            ],
        }
    ]
}

.webassetcompiler.json file

Same as VS Code settings without webAssetsCompiler prefix

Autoprefixer settings

Settings same as browserslist.
Click here for more details

SCSS/CSS/JS/HTML formatter settings

Using .jsbeautifyrc file for settings same as js-beautify.
Click here for more details

* SCSS will use all settings for CSS