I want to use vite in Laravel 10 with scss and vanilla JS with a watcher on a remote server.
- node 20.9.0
- npm 10.1.0
- vite ^4.0.0
Due to reasons, development does not happen locally but on a remote server.
Running npm run dev on this remote server, does not work as it is too much expense to configure it.
Fortunately I found out that the vite build-command can have a --watch flag.
SCSS was set up in this project just by running npm add -D sass.
Compiling scss to css basically does work.
Running npm run dev locally works, npm run build works on the remote server.
CSS is compiled correctly and the HTML is rendered correctly with the respective includes of CSS and JS.
To use the watcher option, I added another script in the package.json
"scripts": {
"dev": "vite",
"beta": "vite build --watch",
"build": "vite build"
}
The problem is, that if I start the watcher on the remote server and modify the scss file
via FTP/ SFTP, vite does not compile it to css but to an empty js-file.
Things get pretty confusing there:
This is the first output after starting the watcher (everythings fine and as expected):
✓ 7 modules transformed.
public/build/assets/stop-906b2688.svg 0.34 kB │ gzip: 0.22 kB
public/build/manifest.json 0.80 kB │ gzip: 0.25 kB
public/build/assets/logo-65a56219.png 10.67 kB
public/build/assets/roboto-f6734f81.woff2 15.74 kB
public/build/assets/griffy-f1f5e5e8.woff2 70.00 kB
public/build/assets/techdata.scss-584c0b16.css 0.33 kB │ gzip: 0.24 kB
public/build/assets/techdata.js-14700b47.js 0.03 kB │ gzip: 0.05 kB
built in 413ms.
Editing now the scss-file results in this output (empty techdata.scss-4ed993c7.js):
(Editing scss from now on always results inempty js-file)
build started...
✓ 1 modules transformed.
public/build/assets/stop-906b2688.svg 0.34 kB │ gzip: 0.22 kB
public/build/manifest.json 0.80 kB │ gzip: 0.25 kB
public/build/assets/logo-65a56219.png 10.67 kB
public/build/assets/roboto-f6734f81.woff2 15.74 kB
public/build/assets/griffy-f1f5e5e8.woff2 70.00 kB
public/build/assets/techdata.scss-4ed993c7.js 0.00 kB │ gzip: 0.02 kB
public/build/assets/techdata.js-14700b47.js 0.03 kB │ gzip: 0.05 kB
built in 19ms.
After that editing the resources/js/techdata.js.js-file shows this (css now compiled correctly):
build started...
✓ 2 modules transformed.
Generated an empty chunk: "techdata.js".
public/build/manifest.json 0.80 kB │ gzip: 0.25 kB
public/build/assets/roboto-f6734f81.woff2 15.74 kB
public/build/assets/techdata.scss-7ed6f43e.css 0.33 kB │ gzip: 0.24 kB
public/build/assets/techdata.js-4ed993c7.js 0.00 kB │ gzip: 0.02 kB
built in 21ms.
When starting the watcher and edit the js-file as first change (instead of scss), this output is presented:
build started...
✓ 1 modules transformed.
Generated an empty chunk: "techdata.js".
[vite:css-post] Plugin error - Unable to get file name for unknown file "32178f1f".
rendering chunks (1)...
This happens over and over until scss is edited for the first time of this "watcher-uptime".
After this first scss-change (where scss is compiled to emtpy js-file), the JS change is then correctly processed as shown in the example before.
To make it more confusing: Editing the file directly on the server (without FTP) the watcher works perfectly fine for both scss and JS.
My vite.config.js looks like this:
(Fileextension where doubled to check if scss becomes a js-file)
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/scss/techdata.scss.scss',
'resources/js/techdata.js.js',
],
refresh: true,
}),
]
});
I already tried to add options in the vite.config.js for rollup to add build-delay or smth like that but without any improvement.
What am I doing wrong here? Aren't FTP-changes identically to local changes on the harddrive?