Module to compile CSS files from SCSS

Scss

Module to compile CSS from SCSS, using https://github.com/scssphp/scssphp

Auto-compile CSS from SCSS when a file changed


You can put this code into /site/ready.php to automatically recompile an input file (SCSS) into an output file (CSS) whenever one of the watched files changed:

/** @var Scss $scss */
$scss = $modules->get('Scss');

// Find all files with .scss extension in /site/templates/scss.
// You can adjust that to your needs! Note that this might impact your
// websites performance. Usually $files->find() is very fast, but the more files
// you scan, the slower it will get - so try to be specific with your find().
// Also see https://github.com/processwire/processwire-issues/issues/1791
$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

// compile input SCSS to output CSS
$scss->compileIfChanged(
  input: $config->paths->templates . "scss/example.scss",
  watch: $watchFiles,

  // you can optionally define a custom output path
  // if not defined it will use the input path and replace .scss with .css
  // output: '/foo/bar/baz.css',

  // by default the output will be minified, use 'compressed' or 'expanded'
  // style: 'compressed',
);

Watch core files


When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php

$modules->get('Scss')->watchCore();

Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes �

Compile UIkit


// for development you can put this in site/ready.php

/** @var Scss $scss */
$scss = $this->wire->modules->get('Scss');

// also watch all files in /site/templates/scss
$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

// set the import path so that relative @import statements work
$scss->compiler()->setImportPaths($config->paths->templates);

// compile SCSS to CSS if any of the watched files changed
$scss->compileIfChanged(
  // create this file with the content from the uikit docs:
  // https://getuikit.com/docs/sass#how-to-build
  input: $config->paths->templates . "scss/uikit.scss",
  watch: $watchFiles,
  output: $config->paths->templates . "scss/uikit.css",
  style: 'compressed',
);

Scss

Module to compile CSS from SCSS, using https://github.com/scssphp/scssphp

Auto-compile CSS from SCSS when a file changed


You can put this code into /site/ready.php to automatically recompile an input file (SCSS) into an output file (CSS) whenever one of the watched files changed:

/** @var Scss $scss */
$scss = $modules->get('Scss');

// Find all files with .scss extension in /site/templates/scss.
// You can adjust that to your needs! Note that this might impact your
// websites performance. Usually $files->find() is very fast, but the more files
// you scan, the slower it will get - so try to be specific with your find().
// Also see https://github.com/processwire/processwire-issues/issues/1791
$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

// compile input SCSS to output CSS
$scss->compileIfChanged(
  input: $config->paths->templates . "scss/example.scss",
  watch: $watchFiles,

  // you can optionally define a custom output path
  // if not defined it will use the input path and replace .scss with .css
  // output: '/foo/bar/baz.css',

  // by default the output will be minified, use 'compressed' or 'expanded'
  // style: 'compressed',
);

Watch core files


When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php

$modules->get('Scss')->watchCore();

Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes �

Compile UIkit


// for development you can put this in site/ready.php

/** @var Scss $scss */
$scss = $this->wire->modules->get('Scss');

// also watch all files in /site/templates/scss
$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

// set the import path so that relative @import statements work
$scss->compiler()->setImportPaths($config->paths->templates);

// compile SCSS to CSS if any of the watched files changed
$scss->compileIfChanged(
  // create this file with the content from the uikit docs:
  // https://getuikit.com/docs/sass#how-to-build
  input: $config->paths->templates . "scss/uikit.scss",
  watch: $watchFiles,
  output: $config->paths->templates . "scss/uikit.css",
  style: 'compressed',
);

Compile Bootstrap


  • Download bootstrap source files to /site/templates/bootstrap
  • Create the file /site/templates/bs/theme.scss

In theme.css place this:

@import "bootstrap";
// customisations go here

In /site/ready.php add this:

/** @var Scss $scss */
$scss = $this->wire->modules->get('Scss');

// watch all files in /site/templates/scss
$watchFiles = $files->find(
  $config->paths->templates . "bs",
  ['extensions' => 'scss']
);

// set the import path so that relative @import statements work
$scss->compiler()->setImportPaths($config->paths->templates . "bootstrap/scss");

// compile SCSS to CSS if any of the watched files changed
$scss->compileIfChanged(
  // create this file with the content from the uikit docs:
  // https://getuikit.com/docs/sass#how-to-build
  input: $config->paths->templates . "bs/theme.scss",
  watch: $watchFiles,
  output: $config->paths->templates . "bootstrap.css",
  style: 'compressed',
);

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #526
    In the 526th issue of ProcessWire Weekly we'll cover the latest news from the ProcessWire community: newly open sourced Functional Fields module, new site profile to accompany RockFrontend, and more. Read on!
    Weekly.pw / 8 June 2024
  • ProFields Table Field with Actions support
    This week we have some updates for the ProFields table field (FieldtypeTable). These updates are primarily focused on adding new tools for the editor to facilitate input and management of content in a table field.
    Blog / 12 April 2024
  • Subscribe to weekly ProcessWire news

“To Drupal, or to ProcessWire? The million dollar choice. We decided to make an early switch to PW. And in retrospect, ProcessWire was probably the best decision we made. Thanks are due to ProcessWire and the amazing system and set of modules that are in place.” —Unni Krishnan, Founder of PigtailPundits