bernhard Posted October 20, 2022 Share Posted October 20, 2022 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 ? 13 Link to comment Share on other sites More sharing options...
snck Posted November 17, 2022 Share Posted November 17, 2022 @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()); ?> 5 Link to comment Share on other sites More sharing options...
bernhard Posted November 17, 2022 Author Share Posted November 17, 2022 Great thx @snck ? On 11/17/2022 at 5:39 PM, snck said: It might not have been your intention Expand 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 ? 1 Link to comment Share on other sites More sharing options...
gornycreative Posted February 11, 2023 Share Posted February 11, 2023 I was just looking for ways to compile bootstrap and foundation easily and this looks promising. I will try compiling some basic Foundations for Sites templates as well. Link to comment Share on other sites More sharing options...
sebibu Posted September 25, 2023 Share Posted September 25, 2023 Thanks @bernhard for creating this module and @snck for sharing your code/solution!❤️ I come from MODX and now creating a first website with ProcessWire. Very satisfied so far.? @everyone: Where do I place this code, please? Thanks in advance! Sebastian Link to comment Share on other sites More sharing options...
cwsoft Posted September 25, 2023 Share Posted September 25, 2023 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 More sharing options...
sebibu Posted September 26, 2023 Share Posted September 26, 2023 Thanks for the quick answer and sharing your workflow, @cwsoft! On 11/17/2022 at 5: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 Expand 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 More sharing options...
bernhard Posted September 26, 2023 Author Share Posted September 26, 2023 Do you really want scss or would less also be OK? Link to comment Share on other sites More sharing options...
sebibu Posted September 26, 2023 Share Posted September 26, 2023 (edited) Thx! As far as I discovered, LESS is easy to compile with AIOM+ or your great RockFrontend module!? But I‘m using SCSS for years now, so I prefer this right now.? Edited September 26, 2023 by sebibu Link to comment Share on other sites More sharing options...
bernhard Posted September 26, 2023 Author Share Posted September 26, 2023 Yeah that's why I'm asking ? I'm always using LESS and I've built all the tools to easily compile LESS to CSS on the fly. That's not the case for SCSS. I've just pushed an update and updated the readme to support what you need: https://github.com/baumrock/Scss 2 1 Link to comment Share on other sites More sharing options...
sebibu Posted September 26, 2023 Share Posted September 26, 2023 Wow.. thanks a lot, @bernhard!!? That is great. I'm sure a lot developer will love this oppertunity for SCSS beside LESS. Will test it a soon as possible and will report.? Have a great evening!? 1 Link to comment Share on other sites More sharing options...
Stefanowitsch Posted September 27, 2023 Share Posted September 27, 2023 @bernhard does this mean that RockFrontend soon will support the compiling of SCSS files? Please say no. After years of using SCSS I switched to LESS just because of this feature ? Link to comment Share on other sites More sharing options...
sebibu Posted September 27, 2023 Share Posted September 27, 2023 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) Expand 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 More sharing options...
bernhard Posted September 28, 2023 Author Share Posted September 28, 2023 On 9/27/2023 at 9:06 PM, 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. Expand 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 ? 2 Link to comment Share on other sites More sharing options...
Flashmaster82 Posted September 28, 2023 Share Posted September 28, 2023 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 More sharing options...
bernhard Posted September 28, 2023 Author Share Posted September 28, 2023 You need PHP version 8+ I've updated the module with that requirement. Link to comment Share on other sites More sharing options...
Flashmaster82 Posted September 28, 2023 Share Posted September 28, 2023 I have PHP 8.1.12 Link to comment Share on other sites More sharing options...
bernhard Posted September 28, 2023 Author Share Posted September 28, 2023 On 9/28/2023 at 11:44 AM, Flashmaster82 said: $scss->compileIfChanged( input: $config->paths->templates . "scss/style.scss", watch: $watchFiles, output: 'css/style.css' style: 'compressed' ); Expand 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 More sharing options...
Flashmaster82 Posted September 28, 2023 Share Posted September 28, 2023 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 More sharing options...
bernhard Posted September 28, 2023 Author Share Posted September 28, 2023 On 9/28/2023 at 12:01 PM, bernhard said: output: '/path/to/css/style.css', // use path and add comma at the end Expand you didn't provide the full path as I showed you in the comment above Link to comment Share on other sites More sharing options...
Flashmaster82 Posted September 28, 2023 Share Posted September 28, 2023 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 Link to comment Share on other sites More sharing options...
bernhard Posted September 28, 2023 Author Share Posted September 28, 2023 On 9/28/2023 at 12:29 PM, 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 Expand Your error message tells something different ? On 9/28/2023 at 12:21 PM, Flashmaster82 said: Exception: allowPath: pathname not allowed: css/style.css (in E:\Wamp\www\Ganthor\wire\core\WireFileTools.php line 1947) Expand That means that the module tries to write to css/style.css which is obviously not a correct file path. On 9/28/2023 at 12:29 PM, Flashmaster82 said: Expand 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 More sharing options...
sebibu Posted October 9, 2023 Share Posted October 9, 2023 On 11/17/2022 at 5: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()); ?> Expand 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 More sharing options...
bernhard Posted October 9, 2023 Author Share Posted October 9, 2023 Why didn't you use the new methods that I implemented for you? Did anything not work? Link to comment Share on other sites More sharing options...
sebibu Posted October 9, 2023 Share Posted October 9, 2023 On 9/28/2023 at 10:29 AM, 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 ? Expand 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now