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! ?

 

[marie.mdna]

Hi everyone ! Thank you for the great module 🙂

I love using it but keep facing some trouble on live, I am getting this error :

"Error: Exception: `sass/vars` file not found for @import: line: 5, column: 1
In /site/modules/Scss/vendor/scssphp/scssphp/src/Compiler.php line 6102" 

I've found this @import within the admin "/wire/modules/AdminTheme/AdminThemeDefault/styles/jquery-ui.scss" but I have no idea what is behind this error as I don't have in locally... Note that I use Uikit as my default Theme (in case it has anything to do with it).

My ready.php is as follow:

/** @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 . "styles/scss",
  ['extensions' => 'scss']
);

$scss->compiler()->setImportPaths($config->paths->templates . "styles/scss");


// compile input SCSS to output CSS
$scss->compileIfChanged(
  input: $config->paths->templates . "styles/scss/default.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: $config->paths->templates . "styles/default.css",

  // by default the output will be minified, use 'compressed' or 'expanded'
  // style: 'compressed',
);
$modules->get('Scss')->watchCore();

when my default.scss is in /site/templates/styles/scss/default.scss and my output css is /site/templates/styles/default.css

Does anyone have an idea on how to solve this? For now I am only able to navigate my site when I comment the whole watchCore.

Thanks in advance !