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 13
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 5
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

  • 2 months later...
  • 7 months later...

I am just using VSCode and node modules to compile my SCSS and Typescript files into CSS and Javascript and esbuild if needed to bundle/minify files before commit. Basically all my local site/template and site/module folders are git repos. The server structure contain just the created CSS/JS files without the git repo and node modules.

Link to comment
Share on other sites

Thanks for the quick answer and sharing your workflow, @cwsoft!
 

On 11/17/2022 at 6:39 PM, snck said:

Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core

I like to be able to adjust styling even if I‘m on the way only with my smartphone. So I’m interested compiling and minifying SCSS for smaller projects serverside with @bernhards module.

Where do I place @sncks code, please?👏

Link to comment
Share on other sites

Please say yes, @bernhard!🙏 ..sorry, @Stefanowitsch😬.

 

Today I tested compiling of one single SCSS-file successfully! Very smooth.👍  

Then I tried to include partials for customizing UIkit via @import, but files are not found.

Quote

Oops… Fehler: Exception: `variables-theme.scss` file not found for @import: line: 5, column: 1 (in site/modules/Scss/vendor/scssphp/scssphp/src/Compiler.php line 6102)

Tried this three versions in site.scss (variables-theme.scss is in the same directory):

@import "variables-theme";
@import "variables-theme.scss";
@import $config->paths->templates . "scss/variables-theme.scss";

Any idea what I am doing wrong?🤔

Link to comment
Share on other sites

13 hours ago, sebibu said:

Today I tested compiling of one single SCSS-file successfully! Very smooth.👍  

Then I tried to include partials for customizing UIkit via @import, but files are not found.

I didn't test includes or imports. As I've never worked with SCSS and LESS has always just worked for me I'd need input from others to make it work. I don't see a reason why RockFrontend should not also support SCSS. It would need some more work though than what I quickly did for this module on Tuesday, so it's not really a top priority 🙂 

  • Like 2
Link to comment
Share on other sites

I can´t this module to work.

ready.php

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

$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css'
  style: 'compressed'
);

I get error "syntax error, unexpected ':', expecting ',' or')' ?  Error: Exception: allowPath: pathname not allowed: css/style.css

Please help!

Link to comment
Share on other sites

15 minutes ago, Flashmaster82 said:
$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css'
  style: 'compressed'
);

Should be this:

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: '/path/to/css/style.css', // use path and add comma at the end
  style: 'compressed', // optional but recommended comma at the end
);

 

Link to comment
Share on other sites

Same error still? Is there something else i should be adding in another file or something?

 

<?php namespace ProcessWire;

if(!defined("PROCESSWIRE")) die();


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

$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css',
  style: 'compressed',
);
Exception: allowPath: pathname not allowed: css/style.css (in E:\Wamp\www\Ganthor\wire\core\WireFileTools.php line 1947)

 

Link to comment
Share on other sites

5 minutes ago, Flashmaster82 said:

The path is correct, the problem is the syntax errors. The path to the file is site/templates/css/style.css and site/templates/scss/style.scss

Your error message tells something different 😉

12 minutes ago, Flashmaster82 said:
Exception: allowPath: pathname not allowed: css/style.css (in E:\Wamp\www\Ganthor\wire\core\WireFileTools.php line 1947)

That means that the module tries to write to css/style.css which is obviously not a correct file path.

6 minutes ago, Flashmaster82 said:

image.png

This means that your IDE complains about the syntax, which could mean that your IDE uses a different PHP version than your project. If your IDE uses something like PHP7.4 then it will check your code with that interpreter and complain about PHP8 syntax. That does not mean that the code will not run though. But obviously it's something that's not ideal.

Link to comment
Share on other sites

  • 2 weeks later...
On 11/17/2022 at 6:39 PM, snck said:

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

?>

 

Dear @snck,

I tried your code above to compile SCSS (UIkit in my case). But I get the following error:

Uncaught Error: Call to a member function setSourceMap() on null in site/ready.php:26

#0 wire/core/ProcessWire.php (893): include()
#1 wire/core/ProcessWire.php (674): ProcessWire->includeFile()
#2 wire/modules/Process/ProcessPageView.module (511): ProcessWire->setStatus()
#3 wire/core/Wire.php (413): ProcessPageView->___ready()
#4 wire/core/WireHooks.php (968): Wire->_callMethod()
#5 wire/core/Wire.php (484): WireHooks->runHooks()

ready.php for the code is the right location?
Any idea what I can change to make it work? Thx in advance.!🙏

Link to comment
Share on other sites

On 9/28/2023 at 12:29 PM, bernhard said:

I didn't test includes or imports. As I've never worked with SCSS and LESS has always just worked for me I'd need input from others to make it work. I don't see a reason why RockFrontend should not also support SCSS. It would need some more work though than what I quickly did for this module on Tuesday, so it's not really a top priority 🙂 

Dear Bernhard,
I'm really thankful for your fast help and implementing the new methods.🙏 But as I wrote, compiling of one file worked like a charm, but to completely customize UIkit like this https://getuikit.com/docs/sass#how-to-build (and any other design framework, too) the import function is - at least in my opinion - necessary. And you wrote, it would need some more work for you to implement it.

So I tried to follow @snck solution (with imports) and read in the SCSSPHP documentation to get it working and maybe do some groundwork for you!?😇

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...