Support of scss/less @import / @use within the <style> section of vue components

[simontaurus]

Description

I've played around with scss/less @import / @use within the <style> section of vue components (see also #4164)

<style lang="scss" >
@use 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css';
</style>

Option 2:

<style lang="less">
@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css');
</style>

I would expect that the referenced css file is included in the app.
Instead it seems like both variants do not have any effect (bootstrap.min.css not loaded) while a build of the component with vite works as expected.

Is this setup not supported by nicegui or is there an issue with my specific stack (Win11, Python 3.11.9, pypyscss / lesscpy installed)

PS: As a workaround I use ui.add_head_html()

[falkoschindler]

Hi @simontaurus,

I'm not too familiar with SCSS and LESS, but according to claude.ai these code snippets are not supported in Vue single file components (SFC):

The @use rule in SCSS cannot load external URLs directly. It's designed to work with local files and modules.

While LESS does support @import url(), using it within Vue's single file components to import external stylesheets isn't recommended and may not work as expected.

So I'd suggest to verify the syntax with a plain Vue app. If it does work, we should look into vbuild which is used by NiceGUI to process SFCs.