Vite build --watch does not compile .scss entry when changing components imported via @use

[hallow thunder]

Hey Everyone,
I'm having a problem with vite build --watch.
I'm trying to implement vite into a neos cms setup. On building, a .js file and a .css file are generated and integrated into the cms. The initial build builds everything fine, and all my styles are in order and work.

However, when i edit a file located under:
styles > sass > components > file.scss
that is being imported via @use into styles > sass > index.scss
the build watcher notices a change, but does not change the compiled index.css.

When i change the index.scss directly, the index.css correctly compiles.

Any help would be greatly appreciated 🙂

github repo to test the issue: https://github.com/mar0yan/vite-build-scss-issue-demo

This is my vite config:

import { defineConfig } from 'vite';
import path from 'path';
import tailwindcss from '@tailwindcss/postcss';

export default defineConfig({
  plugins: [
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
  server: {
    hmr: false,
  },
  build: {
    manifest: true,
    outDir: path.resolve(__dirname, 'Resources/Public'),
    emptyOutDir: true,
    watch: {
        include: [
            'src/javascript/*.js',
            'src/sass/*.scss',
            'src/sass/**/*.scss',
            'Resources/Private/**'
        ],
    },
    rollupOptions: {
      input: {
        'index-css': path.resolve(__dirname, 'src/sass/index.scss'),
        'critical-css': path.resolve(__dirname, 'src/sass/critical.scss'),
        main: path.resolve(__dirname, 'src/javascript/main.js'),
      },
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            // return 'styles/[name].[hash].css'; // Save all CSS files in "styles" folder
            return 'styles/[name].css'; // Save all CSS files in "styles" folder
          }
        },
        entryFileNames: 'javascripts/[name].js',
        dir: 'Resources/Public',
      },
    },
  },
});

[prime raptor]

Yeah you might need to add all the scss file to the "watch" settings

iirc, Vite won't re-compile if an scss import changes. Only the files that you put in "watch" will trigger rebuild

[hallow thunder]

The formatting is a bit bad here - didn't know how to format correctly unfortunately.
I'm including all .scss files in the "build.watch.include" array.
Is that not enough? 🙂
The watcher recognizes a change and re-builds 'something' in the terminal, but the .css is the same in the end.
Do they need to be inside rollupOptions.input ? That would be quite a lot to add then 😵

[prime raptor]

May I have your Github repo to take a look ?

You mentioned a "styles" folder but I don't see it here

FYI, code formatting on Discord follows markdown
Triple backtick<language>
Code
Triple backtick

Example:

`​`​`​js
const a = some code
`​`​`​

[hallow thunder]

Yes, sure. Sorry for the delay.
Here is the link:
https://github.com/mar0yan/vite-build-scss-issue-demo

To test, just run npm install and open the index.html file in the browser.
I used node v22 for this.

Then run

vite build --watch

The first time it will build all .css correctly and put it inside "Resources/Public/styles/..."

When you edit the file src/sass/components/simple-test (that gets imported into the index.scss file)
For example changing the body background color and then manually reloading the index.html, the .css file will not be changed although vite noticed the .scss change and built in the terminal

When you edit the index.scss file directly, the .css will correctly be built.
I unfortunately have no idea on how to fix this at the moment and if that does not work i will have to switch tools i fear - Although i like vite.

Im running vite inside a cms context so building like this is kind of my best option 🙂

[hallow thunder]

just tested - same thing happens with the devServer and HMR!

[prime raptor]

Hi. Sorry I am pretty busy this week and haven't got a chance to look at your repo