Generated scss in site.static_files?


#1

Hey, do you have any idea how could I get all my sass scss files as css files in site.static_files?
I’d like to wrap together all of my scss files automatically without including their references to a main scss file. Is this possible with gulp somehow?


#2

It sounds like you want just the css that each partial would generate on its own? can you give a use case of what you want to do?


#3

Yes, exactly. Right now I’m using Atom editor to compile my individual scss files to css files. What I want to achieve is to have a single css file that is automatically containing all the compiled css files from the subfolders. I want to build a component heavy app where all my components (molecules and organisms) are in a separate folders with their css, js and html counterparts.
Polymer would be an ideal solution for this job but I want a super fast static solution and Jekyll gives the best results so far.

I’m using the code below to get all the static css files from my components folder:



{%- include core.min.css -%}
{%- for file in site.static_files -%}
{%- unless file.path contains “core.min.css” -%}
{%- if file.path contains “min.css” -%}
{%- assign path = file.path | replace: “/components/”,"" -%}
{% include {{ path }} %}
{%- endif -%}
{%- endunless -%}

This script joins all my css files from the components folder but it needs atom editor’s sass compiler plugin to make it work. It would be great if all my compiled sass file would appear in site.static_files without any further hacking.


#4

I can’t quite grasp exactly what you are trying to do, but I sort of see what your code block is doing - clever.Are you manually making an include for each different thing? Is this to then add that items css into the core css? You might be able to do file.content to get the css contents directly.

It sounds like you have your partials scattered all over the place and that doesn’t work with Jekylls sass stuff cause it wants them all in one place?

I now use gulp for all sass processing as it is blazing fast - much quicker than letting jekyll do it. It is also very flexible so I think you could do what you want.

Here is a write up on what I do now with Gulp and Jekyll:
https://rdyar.github.io/2017/10/01/speed-up-jekyll-by-using-gulp-for-sass-and-other-assets/

there is also a post in here that I did about that write up that also has some links/info from @mmistakes who is way better at this type of thing that I am.