How to exclude folders/files with this plugin?
PrimalOutshoot opened this issue · 4 comments
I have the lightningcss and sass plugin that came with the 11ty sass theme -
Right now the plugin is compiling sass, but not outputting css. This is easy to workaround, the primary challenge is that there are folders and files I want to exclude from being compiled, and I currently don't know where/how to exclude those folders.
Looking at the source code, seems like files with names starting with _ will be ignored. This is a sass convention: https://sass-lang.com/guide/#partials. Would this work for your usecase?
Unfortunately I had considered the sass convention with _underscore, but it only works for individual files, and not folders, and for the individual files that are imported it requires renaming all of them with _underscore. If I use this convention, I would have to rename all the imported individual files with an underscore, which would require adjustments to my current structure and project setup - which is currently cross-compatible between projects.
Currently the way this system works - all my files and folders that are already imported into style.scss/css are also being compiled into css in the final output, even though they are compiled into the style.css. And even when they aren't referenced or used anywhere in the code, they still compile in the final output. Simply commenting out the import references does not stop them from being compiled in the final output.
Example:
If I for instance have style.scss and it imports experimental/index.scss (with some elements turned on/off), and, animations/index.scss (with some animation features turned on/off) - every single one of the folders and files that are already imported into style.scss will compile into .css, including features I had //greyed out and turned off. This will be present in the final output.
This makes style.scss both inefficient because it contains code that is not use - and - redundant repeating the code twice - twice in itself (style.css), and then again in the individual .css file that was compiled even when it did not need to be.
The only way around this would be to change my entire structure and write the imports all in my head.njk instead of within style.scss the way I have been using them. This is possible - but this structure is not cross-compatible with my other projects, which still rely on style.scss.
Prior to using this plugin, I would simply run Dart Sass and only the SASS file or files that were specified would compile, not the entire directory. Commenting out any imports that I did not want in the final output was sufficient. I can work with the Plugin's system - and can use it to my advantage if I can - keep my folder and file structure as is, but simply tell the config to:
- ignore these individual files (without bothering with _underscores) - and -
- ignore these folder names (for when the entire directory needs to be ignored)
Is there an option to do so via config, or, is there a work around to that would not require changing my entire project structure?
- Or - to achieve the level of specificity that I need, would the only solution be to turn off the plugin and switch to dart sass or npm sass?
So if I understand it correctly, the problem is that this_should_not_compile.scss will be in the final output as this_should_not_compile.css. Have you considered adding these files/folders to .eleventyignore? https://www.11ty.dev/docs/ignores/
I think it should work, as what this plugin does is that it makes Eleventy recognise scss as a template language.
Ah, I see. That makes sense. Thanks for explaining how the plugin works. I will give that solution a try.
Update, thanks that ended up being the solution.