SCSS/Less Compiler

Module automatically compiles SCSS/LESS files defined in libraries.yml into CSS.

SCSS compiler: scssphp
LESS compiler: lessphp

Starting with the 2.x branch, the module uses scssphp 2.x by default.

If you need the LESS compiler: composer require wikimedia/less.php
If you need the scssphp 1.x version: composer require scssphp/scssphp:^1.0

Installation

If you manage your site with Composer, install this module like any other Composer package. Dependencies will be resolved automatically.

Configuration

All module settings are available on the Performance page.

The “Check file modified time” option tracks the last modified time of files, so the module will not recompile files until they change.

Usage

Flush the cache after installing the module to create the compile list cache.

# my_module.libraries.yml
main:
  version: VERSION
  css:
    theme:
      scss/styles.scss: {}
      less/styles.less: {}

By default, compiled files are saved to public://scss_compiler
You can also define css_path — the path where the compiled file should be saved. The path is relative to the module/theme where libraries.yml is located, for example:

# my_module.libraries.yml
main:
  version: VERSION
  css:
    theme:
      scss/styles.scss: { css_path: '/css/' }

The file will be saved to my_module/css/styles.css

The assets_path option allows you to define where static resources are located. By default, this is the module/theme folder. The value should be the full path to the assets folder and supports tokens for a theme/module.

# my_module.libraries.yml
main:
  version: VERSION
  css:
    theme:
      scss/styles.scss: { assets_path: '@my_module/assets/' }

url(image.jpg) in CSS will be compiled to:
url(/modules/custom/my_module/assets/image.jpg);