Use JuiceLink with SCSS in a Twig template doesn't seem to work

[en-hdettmann]

Hey,

I'm trying to compile a Twig template with Vituum that uses some SCSS files for styling. So far I'm able to compile it successfully but I need to also inline the generated CSS in the final HTML with this plugin but unfortunately I didn't got it working yet.

The setup for the juice plugin looks like this:

juice({
    paths: ['./static-pages/pages'],
    juiceLink: async (href) => sass.compile(href).css
}),

In the Twig template I changed the link tag to:
<link rel="stylesheet" data-href="/assets/scss/styles.scss" data-juice-link>

When I try to build I get this error:

file:///path/to/node_modules/@vituum/vite-plugin-juice/index.js:62
                        const href = link.attrs.filter(({ name }) => name === 'data-href')[0].value
                                                                                             ^

TypeError: Cannot read properties of undefined (reading 'value')

It looks to me that the tag is gone after Twig has done its job. Any ideas how to avoid this?

Thanks for any feedback and help here!