Is it possible to develop themes with SCSS and map file?

[pftnhr]

What is actually wrong with storing the themes in the /media/themes/ folder? I am currently having problems developing a website with SCSS, because the CSS map file and the SCSS files should be in the same directory as the stylesheet so that you can debug properly in the browser.

Is there a quick and dirty way I can do this?

[PetersOtto]

I also work with SASS. My workaround looks like this:

Put an empty css file with the theme name (yourThemeName.css) in the themes folder and all other files in system/extensions/yourTheme folder. Then you have to link the css file with

<link rel="stylesheet" type="text/css" data-bundle="exclude" media="all" href="<?php echo $this->yellow->page->getBase(true) ?>/media/extensions/yourThemeFolder/css/style.min.css">

into your header.

Good Luck :)

[pftnhr]

Well, the problem remains, because I only make /media/themes/ into /media/extensions/ and my browser still can't find style.min.css.map under /media/extensions/yourThemeFolder/css/.

Or have I missed something?

[PetersOtto]

I work with SASS but not with the .map files.
Are you sure that the link to your .map file is set correctly?

I use the following folder structure:

├── content               
│   ├── 1-home            
│   ├── 9-about           
│   └── shared            
├── media                 
│   ├── downloads         
│   ├── images            
│   └── thumbnails        
└── system                
    ├── extensions
    │   ├── myTheme
    │   │   ├── css
    │   │   ├── favicon
    │   │   ├── fonts
    │   │   ├── js
    │   │   ├── scss    
    ├── layouts           
    ├── themes
    │   ├── myTheme.css (empty)     
    └── trash  

[pftnhr]

Are you sure that the link to your .map file is set correctly?

The path is correct. Unfortunately, the system folder doesn't allow calls via https as set in the .htaccess: RewriteRule ^(content|system)/ error [L]. And I don't want to change anything in the .htaccess settings either.

[markseuffert]

Please note that direct access to the system folder is not allowed. Files needed for themes are mapped via a virtual location. The core checks with isSafeFile() that the mapped files are a well-known file type. You can experiment/modify the source code to add more file types.

[pftnhr]

Thank you @markseuffert, that was a great tip! I added scssand map to line 1780 and now I can debug properly in the browser.

Do you see a way to do this with an extension so that the functionality in core.php is still there after an update?

[markseuffert]

Yes, you could do this with an event handler. You could even write your own CSS preprocessor. See also #145.

[pftnhr]

I am quite happy with SCSS, especially as there is a plugin for Nova.app. For the moment, I'm fine with editing core.php for the time it takes me to finish the theme.

[PetersOtto]

Yes, you could do this with an event handler. You could even write your own CSS preprocessor. See also #145.

Hi Mark, how does it work with the 'event handler'? Is there an example somewhere? Maybe in an extension?

[annaesvensson]

Tip: You can let us know when your question has been answered, click on Mark as answer.

[pftnhr]

I would love to mark Mark's answer as the solution, but unfortunately I can't.

[annaesvensson]

I like to help but a comment inside a thread can not be an answer, neither can a thread be split into two. Please do me a favour, write a new comment with a brief summary of the solution that works for you.

[annaesvensson]

Good news, a comment inside a thread can be an answer. You probably have to unmark the old one first and then select a new one. Github added this feature now, see also https://github.blog/changelog/2023-04-17-marking-a-threaded-comment-as-the-answer/

[pftnhr]

Done! 😃

[pftnhr]

@markseuffert|s comment about the isSafeFile()function in the core.phpwas the decisive hint. I added scss and map to line 1780 and now I can debug properly in the browser.

[annaesvensson]

Now there's support for sourcemap files in the latest core, thanks to Robert. When you develop themes with a CSS preprocessor and inspect HTML elements in your web browser's developer tools, it should automatically show you the correct SCSS file and line number. It works in Safari and Firefox, no special settings are required, and probably works in other web browsers too.

[PetersOtto]

I use Brave as browser. It also works fine with Brave.

For new projects I use my own basic theme. So far I have saved all the scss code in one in one file. Over time, the file became too long and the code too confusing. Now I have tidied up and use now several scss files (@import).

Especially with several scss files I find the CSS sourcemaps as great help.

Thank you for including this function and @pftnhr thanks for getting the ball rolling!