Jump to content

Scss - Module to compile CSS from SCSS


bernhard
 Share

Recommended Posts

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 😎

  • Like 12
Link to comment
Share on other sites

  • 4 weeks later...

@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());

?>

 

  • Like 2
Link to comment
Share on other sites

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 🙂 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...