Possibility to disable Sass (using eleventy-plugin-sass)

[silveltman]

I recently added bookshop to my 11ty-starter repo (bookshop branche at https://github.com/silveltman/11ty-starter). In this repo I use eleventy-plugin-sass to generate my CSS. I have a _sass folder in which I have my own kind of 7-1 structure. In the base folder I have built a design system.

Obviously, I want to use this design system in my components. I couldn't get it to work with the sass compiler built into Bookshop, so I did the following:

1. I added a _main.scss file to component-library in which I import all my component styles.
2. In the main.scss file in my _sass folder I import this file.

I like that I have full control over the order in which the scss is compiled. However, 2 problems arise:

1. I have to manually add every sass file to my _main.scss file
2. And more important, the built-in Bookshop sass compiler is still running...

main.scss in _sass folder

@import 'abstracts/variables';
// @import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

@import 'vendors/cloudcannon';
// @import 'vendors/snipcart';

@import 'base/sanitize';
@import 'base/colors';
@import 'base/spacing';
@import 'base/styling';
@import 'base/typography';
@import 'base/base';

@import '../component-library/main';  <--------

@import 'layout/carousel';
@import 'layout/grid';
@import 'layout/modal';

@import 'pages/index';

// @import 'themes/my-theme';

// @import 'shame';

_main.scss in component-library folder

@import 'components/gallery/gallery';
@import 'components/accordion/accordion';

I also don't really like having to name the component twice

I would love to hear any solutions to the problems that arise here. Also, I am open to complete alternative. Thanks! :)

[bglw]

The way I would do this is:

1. Run the bookshop sass compiler and tell it to output an SCSS file with -o _sass/_bookshop.scss
2. Import the file in your main SCSS with @import 'bookshop';

This doesn't solve the problem where you have two SCSS compilers running, but they will be working on separate styles and you won't have to reference every component.

There might be a better fix on the way — Eleventy has soft-released a way to process SCSS in the build. See Twitter: https://twitter.com/DavidDarnes/status/1478296999715876866

It's on my list to dig into this and get Bookshop plugged in, to match the way that Jekyll & Hugo can process Bookshop styles in-build.

[silveltman]

Look promising!

Also, I like the steps you mention. Only downside I see is that I lose the ability to decide on the order in which the components' sass is compiled. This is something to keep in mind when using nested bookshop components.

[bglw]

Yes, that's true. Part of my justification is that in an ideal world Bookshop components are fully portable and free of side effects, and thus the compilation order shouldn't matter. That isn't always the case in the real world, though.

[bglw]

👋 Hi Sil,

How has the sass workflow been going for you? Is there anything you would still like implemented from this conversation?