I am trying to compile SCSS with cssSweet but cannot seem to import .scss files into each other.
Install cssSweet.
Create new chunk eg ‘test.scss’
Import into csss.custom_css.scss eg @import test.scss and save.
Save does not work
Save does not work. File is not imported.
MODX version 2.8.5, cssSweet 5.2.0
Try leaving off the extension and putting quotes around the filename. This assumes that they are in the same directory:
@import "test"
No luck there I’m afraid
I took a quick look at the cssSweet docs. I didn’t see anything about it being able to handle .scss files.
Do you have PhpStorm? It can be set up to process SCSS files and export them to CSS files automatically when you save an SCSS file. It also has editing help, error checking, and highlighting for editing SCSS files.
I do have SCSS preprocessing set up locally with Gulp and I even had a system set up where the .css file would FTP up to the server on save.
However I found this wasn’t ideal for my work process and was a bit tedious especially as I would have to wait for the file to FTP and then manually clear the MODX cache each time I wanted to view changes.
I was hoping I could use something like cssSweet for simple sites where I could just login and makes changes on the fly from any computer.
I thought cssSweet might be able to handle imports as there is a commented out example import line example .scss chunk.
I also found this line in the saveCustomCss chunk:
// Optionally set base_path for scss imports
$scss_import_paths = $modx->getOption('scss_import_paths', $properties, '');
$scss_import_paths = (empty($scss_import_paths)) ? array() : $csssweet->explodeAndClean($scss_import_paths);
You’re right. I looked deeper in the code and the extra not only appears to handle SCSS files, but it looks like it has a built-in SCSS compiler.
I found your code example above and I’m guessing that rather than using @import you need to put a comma-separated list of paths to the SCSS file(s) you want to import in the saveCustomCss plugin’s scss_import_paths property. My guess is that the extension should be included in the filename, and you may need a full absolute or relative path, depending on where the files are.
An alternative is to put the SCSS code in one or more chunks, leave the scss_import_paths empty and put a comma-separated list of the chunk names in the plugin’s scss_chunks property. This feature looks like it might not have been fully tested.
FWIW, I don’t think this code would work reliably in MODX 3, though it might not take too much work to fix it.
Thanks Bobray.
I did try to mess around with these setting buyt for some reason the Plugin Properties page hangs when I try to save. Did this occur with you as well?
No, I don’t actually have cssSweet installed. I just looked at the code on GitHub.
You could edit the properties in PhpMyAdmin in the modx_site_plugins table. The properties field contains a JSON string. Somewhere in it there’s probably a scss_import_paths:"" bit. You could just fill in your info between the double quotes. Same for the scss_chunks property.
The failure to save is usually due to an issue with some mod_security rule on the server not liking a part of the content.
Ah yep. That would be it. I cannot edit static files for the same reason.
Many thanks Bobray.
I had setup a development site last year that used a modified version of cssSweet (with the help of @sepiariver and @sottwell) that use MODX resources as the source. Very convenient to modify the files and to leverage TVs and system settings. It never got to production. I might be able locate it if you are interested.
Sure! That would be great!
FWIW, I think using a chunk for the data makes a lot more sense. The modResource object has a ton of overhead that you don’t need. Using chunks would be faster as well.
The resources are only used to generate the static CSS. Using resources gives some advantages, such as being able to schedule styles, and allowing some to be edited by groups and some not.
You could have “seasonality” CSS, for example today you can change the theme to green.
You have to create a Context, mine is called “stylesheet”
saveCustomCss properties
Some examples…
custom_variables.sass
bootstrap-core
forms.sass
This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.
