Sass with includes

[cfjedimaster]

I'm new to Sass, and trying to make use of a Jekyll theme that makes use of it. My site's source directory is src. I'm using the addTemplateFormat example here, https://www.11ty.dev/docs/languages/custom/#example-add-sass-support-to-eleventy, to enable support for .scss. The theme used a _sass directory that I have copied as is to the root of my project, so it's under /, whereas my site input is specifically /src.

In /src/assets/css/style.scss, I've got a few short lines:

$tab-count: 6; 

@import "//_sass/jekyll-theme-chirpy";

When I run my site, it "compiles" the scss but ignores the import.

So I guess what I'm asking is... how do I use a .scss file that needs to import a bunch of stuff such that I can keep those resources in their own folder, outside of /src (I don't want Eleventy to try to compile them twice).

[bobmonsour]

Stephanie Eckles did a thing that lets you keep the imported files inside of src and skips scss files that start with an underscore. She wrote about it. It might help. I have tried the plugin she built and it works but seems to have a strange side effect (not really sure if the issue is the plugin or 11ty).

https://11ty.rocks/posts/process-css-with-lightningcss/

Here's a link to the issue I posted about the plugin. Not sure you'll have the same issue or not once you put the imported files into src.

5t3ph/eleventy-plugin-sass-lightningcss#2

[cfjedimaster]

Hmm, my worry here is that the theme files dont start with _. The _sass folder does, but it looks like she is checking the filename only.

[cfjedimaster]

So, what worked for me was this plugin: https://github.com/kentaroi/eleventy-sass. I only had one issue. One file in the includes included another and I had to add ../ to get it working. Seems... mostly safe. ;)

[bobmonsour]

Sounds good. I'm thinking of reverting to what I had pre-plugin. It required more scripts in my package.json, but it didn't have the sitemap issue that I've run into.

[pdehaan]

https://www.11ty.dev/docs/languages/custom/#using-inputpath also has some tips on using Sass+@import using loadPaths[] (but it's possibly storing all the Sass in the _includes/ folder within src/).