Scss - Module to compile CSS from SCSS

[bernhard]

I just tried and everything seems to work as expected if you set the correct import path (see docs https://scssphp.github.io/scssphp/docs/ ). I've added an example to the readme.

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

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

// 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',
);

 

[sebibu]

Amazing, @bernhard!🙏

Wasn‘t online yesterday and will test it today.👍 Until then.👋 Have a great day!☀️

[JoshoB]

I am also trying to make this work in ready.php to compile Bootstrap on-the-fly, but I get a weird error. Here is the code, adapted from the stuff so kindly shared earlier in the thread, with some modifications to make the file modification checks work (or so I thought):

// Define the paths
$inputScssPath = $config->paths->templates . "scss/custom.scss";
$bootstrapScssPath = $config->paths->templates . "bootstrap/scss";
$outputCssPath = $config->paths->templates . "styles/bootstrap_custom.css";
$outputMapPath = $config->paths->templates . "styles/bootstrap_custom.map";

// Check if the output CSS file exists and if any SCSS file has been modified
$recompileRequired = !file_exists($outputCssPath);
if (!$recompileRequired) {
    $outputCssMTime = filemtime($outputCssPath);
    $recompileRequired = false;

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

    foreach ($watchFiles as $watchFile) {
        if (filemtime($watchFile) > $outputCssMTime) {
            $recompileRequired = true;
            break;
        }
    }
}

// Compile SCSS if recompilation is required
if ($recompileRequired) {
    $scss = $modules->get('Scss');
    $compiler = $modules->get('Scss')->compiler;

    if($compiler)
        die("Found module.");
    else
        die("Module not found!"); 

    $compiler->setSourceMap($compiler::SOURCE_MAP_FILE);
    $compiler->setSourceMapOptions([
        'sourceMapURL' => $outputMapPath,
        'sourceMapFilename' => $outputCssPath,
        'sourceMapBasepath' => $config->paths->root,
        'sourceRoot' => '/',
    ]);
    $compiler->addImportPath($bootstrapScssPath);
    $compiler->setOutputStyle("compressed");

    // Get the result
    $result = $compiler->compileString('@import "'.$inputScssPath.'";', $config->paths->templates . "scss");

    // Save the output in the proper files
    file_put_contents($outputMapPath, $result->getSourceMap());
    file_put_contents($outputCssPath, $result->getCss());
}

It kept giving me a fatal error at the line with $compiler->setSourceMap($compiler::SOURCE_MAP_FILE); (complains about NULL), so I added the check with the die statements: it cannot find the compiler for some reason. But if I change if($compiler) to if($scss) -- I added $scss for testing purposes -- it finds the latter just fine. Any idea what I am doing wrong here?

[bernhard]

Just tried and it instantly worked with the code I shared above. I've added an example to the readme. Does that help? https://github.com/baumrock/Scss/blob/main/README.md

[JoshoB]

5 hours ago, bernhard said:

Just tried and it instantly worked with the code I shared above. I've added an example to the readme. Does that help? https://github.com/baumrock/Scss/blob/main/README.md

Earlier message deleted: I made a mistake with the relative paths -- it all works now, great! Thank you! 🙂