Adding Rendering Support for Sass

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that enables the use of nested rules, variables, imports, etc.

sassCompilation 

The sassCompilation key adds Sass support so that you can:
  • Specify which file types to be compiled as Sass modules.
  • Configure which Sass compiler to use.
  • Determine whether URLs in Sass files should resolve to absolute file paths before compilation.
  • Include the paths where Sass modules resolve from (relative or absolute).
  • Properties: modules, compilerRuntime, resolveUrls, includePaths

Property: modules (string[]) 

This property defines the path and module extensions for Sass modules to include and/or ignore, input as an array of glob patterns. 
1
2
3
4
5
6
7
8
9
10
11
12
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "sassCompilation": {
        "modules": {
            "include": [
                "**/*.module.scss"
            ],
            "ignore": []
        }
    }
}
Note:
The default value of this setting is "include": ["**/*.module.scss"].

Property: compilerRuntime ("dart-sass" | "node-sass" | "auto") 

This property specifies the Sass compiler to use. The options are:
  • "dart-sass"
  • "node-sass"
  • "auto"
1
2
3
4
5
6
7
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "sassCompilation": {
        "compilerRuntime": "auto"
    }
}
Note:
The default value of this setting is "auto" (first tries to use node-sass, falling back to dart-sass if not found).

Property: resolveUrls (boolean) 

This property determines whether URLs in Sass files should resolve to absolute file paths before compiling them.
1
2
3
4
5
6
7
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "sassCompilation": {
        "resolveUrls": true
    }
}
Note:
The default value of this setting is true.

Property: includePaths (string[]) 

This property stores an array of relative paths to resolve Sass files from.
1
2
3
4
5
6
7
8
9
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "sassCompilation": {
        "includePaths": [
            "src/modules"
        ]
    }
}
IN THIS ARTICLE
Previous article
Next article