Compile SCSS inside Drupal.

SCSS Compiler turns a theme's or module's SCSS into CSS with scssphp, a pure-PHP Sass compiler. No Node.js, no gulp or webpack, and no build chain to maintain.

Install Read the documentation

For Drupal 10.2+, 11 and 12 · scssphp 2

themes/custom/mytheme/scss/style.scss

scss/style.scss

@import "variables";

.card {
  color: $brand;
  .card__title { font-weight: 700; }
}

css/style.css

.card {
  color: #0678be;
}
.card .card__title {
  font-weight: 700;
}

/*# sourceMappingURL=style.css.map */

Compiled by drush scss:compile

SCSS Compiler is for site builders and themers who want Sass without a front-end toolchain: on managed hosting, in locked-down environments, or on teams that would rather not maintain Node.js. It compiles from the settings page, from Drush, or automatically while you develop.

Compile anywhere

Press Compile and write on the settings page, run drush scss:compile in a deployment or CI job, or turn on watch mode while developing.

Check before writing

Test compiles every file and shows the CSS and its size on the page without writing anything.

Themes and modules

Compile the default theme or any installed theme, plus extra directories such as custom modules with their own SCSS.

Features

• Every .scss file whose name does not start with _ is compiled; partials are only imported. Subdirectories are mirrored in the output directory.
• Expanded or compressed output, and source maps written next to the CSS with paths relative to the map.
• Additional import paths and a list of files to ignore.
• Watch mode recompiles when a source file or an imported partial changes, at most once per configurable interval.
• Errors are reported per file. A broken file or a missing directory does not stop the others from compiling, and drush scss:compile exits non-zero.
• hook_scss_preprocess_alter() lets themes and modules inject variables or rewrite SCSS before it is compiled. See Extending.

Requirements

• Drupal 10.2 or later, Drupal 11, or Drupal 12.
• scssphp 2.x, installed by Composer with the module.
• For compiling from the browser, write access for the web server to each CSS output directory. On production, compile with Drush instead; see Usage.