How to compile Sass

[frankziski]

Hey there, i started using kirbyup to write a panel plugin. The building process works well for the index.js, but like described in the cookbook recipe from kirby, kirbyup should compile my sass into the index.css, which is not working.

I created an index.scss file inside plugin-diretory/src, the npm-watcher detects a change inside the file, but no index.css is generated.

Can you tell me what need to be done here?

This is my package.json:

{ "scripts": { "dev": "npx -y kirbyup src/index.js --watch src --watch libs", "build": "npx -y kirbyup src/index.js" }, "devDependencies": { "kirbyup": "latest" } }

[johannschopplich]

Have you included the index.sass in your index.js?

Given the Sass file inside src/index.sass:

// src/index.js

import "./index.sass".

You will have to include the CSS/Sass in your JavaScript file to let Vite know to process them.

[frankziski]

yep thats what was missing. Thanks!

Is there also an option to tell kirbyup to minify the output css?

[johannschopplich]

The output CSS is minified by default.

[frankziski]

well im just an idiot. I was just running the dev option. When using build it is minified.

I close this now :)

[johannschopplich]

Glad you could make it work.