Compile SCSS files (besides themes)

Flow
1

Hi, we have a code base where we are using scss not only to build the main (vaadin) app theme, but also other css-files, e.g., for handing that css file to a third party tool. Earlier (v8) we used Vaadin’s bundled scss compiler via a Gradle task.

Now we want to do the same thing with flow. What I attempted was to declare additional entry points in vite.config.ts like so

...
build: {
    rollupOptions: {
        input: {
            'customstyle/a': path.resolve(frontendFolder, 'themes/a/styles.scss'),
            'customstyle/b': path.resolve(frontendFolder, 'themes/b/styles.scss'),
        },
...

With this, I get two styles.SOME_HASH.css files in build/resources/main/META-INF/VAADIN/webapp/VAADIN/build. However, I cannot control the names. As far as I understand, naming can be set in the rollup output object, however when I start to fiddle with this, the indexhtml target throws all kinds of errors.
So maybe this is not the right way to do this at all. The goal would be, to have a list of .scss files that should be compiled to .css files with the same tooling as the main theme file.

Do you have any pointers for me, where to look?

2

There are two alternatives. Either you introduce SASS plugin in vite config of Vaadin 23 or use SASS maven plugin to perform the compilation.

3

Here is an example of how to do it with maven plugin Compiling Bootstrap 5 sass in Vaadin 8 project fails - Stack Overflow

4

The first alternative sounds better, as this would then be the same compiler for my extra css files as for the standard vaadin theme css. Same sass-library, same underlying node and so on.

5

I do not know vite example, here is webpack example GitHub - jcgueriaud1/sass-in-vaadin14

6

That works quite well for importing sass, e.g. when you want to @CssImport a scss file, then it is compiled into a css file and then it can be ingested into the bundle for index.html. (With vite you don’t need such a loader anymore, it is enough to have the sass package installed, it will work automagically).
I am searching for the other way, where I can define output files.

7

As I am scrolling through the list of vite-plugins and rollup-plugins, it feels like my idea is not what these tools are made for :sweat_smile:

8

I am searching for the other way, where I can define output files.
That is possible with the maven plugin example I shared, as it allows to defined source and destination folders nicely.

9

Ok thanks, I was hoping for a solution that could use the same tech stack as the rest of Vaadin