Scss - Module to compile CSS from SCSS

[bernhard]

The module originated from an idea/discussion in this thread. I hope that helps to see more PRs for improving the PW backend 🙂 

https://github.com/baumrock/Scss

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 😎

[snck]

@bernhard Thanks! 👍 I was looking for a nice way to compile some SCSS (Bootstrap in my case) the other day and as Sassify has not been updated for almost 4 years I had a look into your Scss module. It might not have been your intention, but as this a viable wrapper for scssphp I could use it for my case as well. Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core:

<?php

$compiler = $modules->get('Scss')->compiler;

$input_scss = $this->wire->config->paths->templates."scss/custom.scss";
$bootstrap_scss_path = $this->wire->config->paths->templates."bootstrap/scss";
$output_css = $this->wire->config->paths->templates."css/bootstrap_custom.css";
$output_map = $this->wire->config->paths->templates."css/bootstrap_custom.map";

$compiler->setSourceMap($compiler::SOURCE_MAP_FILE);
$compiler->setSourceMapOptions([
    // relative or full url to the above .map file
    'sourceMapURL' => $output_map,

    // (optional) relative or full url to the .css file
    'sourceMapFilename' => $output_css,

    // partial path (server root) removed (normalized) to create a relative url
    'sourceMapBasepath' => $this->wire->config->paths->root,

    // (optional) prepended to 'source' field entries for relocating source files
    'sourceRoot' => '/',
]);
$compiler->addImportPath($bootstrap_scss_path);
$compiler->setOutputStyle("compressed");

$result = $compiler->compileString('@import "'.$input_scss.'";', $this->wire->config->paths->templates."scss");

file_put_contents($output_map, $result->getSourceMap());
file_put_contents($output_css, $result->getCss());

?>

 

[bernhard]

Great thx @snck 🙂 

2 minutes ago, snck said:

It might not have been your intention

Well... not directly. But the intention was to leave that open 🙂 I'm not using Scss for anything other than core-files at the moment as I'm happy with my UIkit/LESS setup. But I'm happy to hear that it works for compiling bootstrap Scss as well. Who knows what happens to LESS... It's good to have two options 🙂