Hey @jimbobrjames, Thanks for the reply. Here’s an example of what I mean:
Say I have a /src/sass/templates folder containing files like…
home.sass
about.sass
projects.sass
etc…
and I want each file processed individually and output to the /assets/css/templates folder. I want the resulting files to be…
home.css
about.css
projects.css
etc…
The templates folder is the primary place I use this because I like using Kirby’s @auto feature. Basically any file I put into /src/sass/templates I always want output to the same file name with a .css extension.
So I’m asking if it’s possible to pass Laravel Mix a folder and have it process all of the files within and output them to some other folder
Oh yes, i see. Personally i dont do it like that, i use imports into scss and requires / imports in the main script file to keep my code modular but end up with a single concatainated file.
That said, there does seem to be a work around. Since mix is actually a fancy pants wrapper around webpack, you can actually load webpack plugins into it. There is one for glob loading which means you can work around it like this…
Heres were i got this info from. But i have a feeling that means globbing inside an import statement, rather then in the mix config. Have a google around if it doesnt work out for you, i’m sure theres probably another webpack plugin out there.
Should you need to compile more than one root file, you may call mix.sass() (or any of the preprocessor variants) as many as times as is needed. For each call, webpack will output a new file with the relevant contents.
Sure, you can totally do that but i think @HYR was wanting to glob it so it didnt matter how many he had (every site is different after all), he could wild card it with a * rather having to write the names in.
Personally I only use this for the rare occasion i need an art directed post. There were once performance benefits to splitting the style sheet per page but if your server is capable of HTTP/2 with push enabled, there is really no need to because all the assets get pulled concurrently rather then consecutively.
I have the same problem with the double dash I’ve tried to modify diverently.laravel-mix-kirby.manifestPath and diverently.laravel-mix-kirby.assetsDirectory but nothing worked for me.
I agree with @jimbobrjames on spliting CSS per templates. I’d only use it if each template requires a good amount of CSS. Keeping it all in one file usually yields a smaller file size when your server GZIPs it.
Anyway, here’s a clean way you can achieve that with Laravel Mix:
You can get the css even smaller still if you get Kirby to help you out with UnCss which will remove unused rules. Great if youve used something Bootstrap or Foundation.
With postcss-uncss installed, add this to your mix options…
Next time you run mix in production, it will use your sites pages to strip unused rules from it
It does not use javascript, so you may need to add any javascript generated classes to the ignore list or they will get removed. It’s clever enough to find strings in classes, so for Tiny Slider for example, just adding tns to the ignore is enough, you do not need all the classes Tiny sliders stylesheet.