SASS usage in single file component plugins

Hello Kirby Forum,

I am currently trying out the single file component approach for block plugins. In the block plugin that I want to convert to a single file component I’m using SASS for the snippet styling and I would like to import the same stylesheet for the panel template. In the docs it is stated that kirbyup

will help to compile Vue’s single file components, convert SASS in your style blocks, minify your code when you build your plugin and more.

But in my project kirbyup doesn’t convert SASS to regular css. My style block from the vue component is looking like this:

<style >
@import '../../assets/phone-contact/phoneContact.scss';
</style>

The css file that is being build by kirbyup is just copy and pasted SASS code from my imported stylesheet. Am I doing something wrong? Can anyone point me in the right direction? Ideally I would want to have only one SASS file for the snippet and the panel preview to not repeat myself.

Have you tried…?

<style lang="scss">
1 Like

Thanks, this seems to work!