learneleventyfromscratch.com icon indicating copy to clipboard operation
learneleventyfromscratch.com copied to clipboard

gulp-sass doesn't have a default Sass compiler

Open abenjamin765 opened this issue 4 years ago • 5 comments

In the sass.js file, const sassProcessor = require('gulp-sass'); needs to also define the sass compiler.

ex: const sassProcessor = require('gulp-sass')(require('sass'));

abenjamin765 avatar Oct 15 '21 16:10 abenjamin765

Yeh this is a big reason why I'm planning to rip out the gulp stuff, at some point. It's in short, a pain in the ass

Andy-set-studio avatar Oct 18 '21 08:10 Andy-set-studio

I am using gulp ^4.0.2 as I had issues with the version recommended in the course. Is gulp still widely used or is it not needed?

jalwn avatar Oct 28 '21 12:10 jalwn

Fwiw, I tried re-writing the gulp stuff using Max Böck's 11ty.js templates. https://mxb.dev/blog/eleventy-asset-pipeline/ For the most part it worked well. But I ran into a problem when I tried to use eleventy's pagination feature to generate the files for criticial.css, home.css, page.css. It wanted to generate them straight into the dist folder, rather than back into the production src folder. I currently don't have the competency to solve that issue, but I'd guess it's possible. Eg. maybe with the Eleventy docs inlining approach? https://www.11ty.dev/docs/quicktips/inline-css/ Possibly helped with the beforeBuild event? https://www.11ty.dev/docs/events/#beforebuild

koitaki avatar Oct 29 '21 23:10 koitaki

The approach I've been trying lately is with Chris Ferdinandi's Boilerplate. Using only the part of sass and images, and adding a script for the fonts could be a good alternative.

I could try a proposal to implement it, however for the explanation part I don't think I'm the greatest fit as I'm still getting my head around build tools myself.

jbbenavidesr avatar Oct 30 '21 23:10 jbbenavidesr

I came across a video on Egghead.io

Not as elegant, but a possible strating point.

nnagewad avatar Nov 10 '21 09:11 nnagewad