Проблемы со стилями Laravel что делать?

Question

[Keith Griffon]

Здарова, я вчера установит ларавэл попробовать, он работал нормально за тем я заново создал проект и запустил
npm install
npm run dev (это не запускается и не создает ничего в public)
npm run watch (с ним ошибки которые ниже)

spoiler

npm ERR! Missing script: "watch"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! /home/asshole/.npm/_logs/2023-07-05T06_37_56_750Z-debug-0.log

вылазиет это при npm run dev

spoiler

> dev
> vite

Port 5173 is in use, trying another one...

LARAVEL v10.14.1 plugin v0.7.8

➜ APP_URL: localhost

VITE v4.3.9 ready in 2587 ms

➜ Local: localhost:5174
➜ Network: use --host to expose
➜ press h to show help

файл лога

spoiler

0 verbose cli /usr/bin/node /usr/bin/npm
1 info using npm@9.2.0
2 info using node@v18.13.0
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 9ms
5 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 13ms
6 timing config:load:builtin Completed in 13ms
7 timing config:load:cli Completed in 7ms
8 timing config:load:env Completed in 2ms
9 timing config:load:file:/opt/lampp/htdocs/VOX/.npmrc Completed in 2ms
10 timing config:load:project Completed in 11ms
11 timing config:load:file:/home/asshole/.npmrc Completed in 0ms
12 timing config:load:user Completed in 2ms
13 timing config:load:file:/etc/npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 3ms
16 timing config:load Completed in 53ms
17 timing npm:load:configload Completed in 53ms
18 timing npm:load:mkdirpcache Completed in 2ms
19 timing npm:load:mkdirplogs Completed in 2ms
20 verbose title npm run watch
21 verbose argv "run" "watch"
22 timing npm:load:setTitle Completed in 5ms
23 timing config:load:flatten Completed in 13ms
24 timing npm:load:display Completed in 17ms
25 verbose logfile logs-max:10 dir:/home/asshole/.npm/_logs/2023-07-05T06_37_56_750Z-
26 verbose logfile /home/asshole/.npm/_logs/2023-07-05T06_37_56_750Z-debug-0.log
27 timing npm:load:logFile Completed in 21ms
28 timing npm:load:timers Completed in 1ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 103ms
31 silly logfile start cleaning logs, removing 1 files
32 timing config:load:flatten Completed in 1ms
33 silly logfile done cleaning log files
34 timing command:run Completed in 19ms
35 verbose stack Error: Missing script: "watch"
35 verbose stack
35 verbose stack To see a list of scripts, run:
35 verbose stack npm run
35 verbose stack at RunScript.run (/usr/share/nodejs/npm/lib/commands/run-script.js:98:13)
35 verbose stack at async module.exports (/usr/share/nodejs/npm/lib/cli.js:133:5)
36 verbose cwd /opt/lampp/htdocs/VOX
37 verbose Linux 6.1.0-kali9-amd64
38 verbose node v18.13.0
39 verbose npm v9.2.0
40 error Missing script: "watch"
40 error
40 error To see a list of scripts, run:
40 error npm run
41 verbose exit 1
42 timing npm Completed in 195ms
43 verbose code 1
44 error A complete log of this run can be found in:
44 error /home/asshole/.npm/_logs/2023-07-05T06_37_56_750Z-debug-0.log

Comments

[Дмитрий Кузнецов]

Видимо что-то не правильно установили. Тем более ваш лог говорит о том, что у вас нет команды watch. Проверяйте все пути, все основные файлы сборщика.
PS: К тому же у вас npm run dev отрабатывает правильно. Попробуйте перейти по ссылке.

[Keith Griffon]

Дмитрий Кузнецов, у меня обычно работало npm run watch а щас ошибки от этого

[Дмитрий Кузнецов]

Keith Griffon, скорей всего вы использовали другой сборщик. Вот и из-за этого сейчас так не работает.

[Keith Griffon]

Дмитрий Кузнецов, а как посмотреть и отменить ?

[Дмитрий Кузнецов]

Keith Griffon, я не знаю что у вас раньше было (если есть исходники, то смотрите в package.json). Лучше используйте то, что рекомендует Laravel - Vite.

Answer 1

[Сергей delphinpro]

Всё у вас правильно.
В последних версиях используется Vite для сборки и по умолчанию есть всего два скрипта

npm run build
npm run dev

Когда вы запускаете dev, то никакие файлы в public и не должны создаваться. Vite запускает свой сервер на localhost:5173, куда и "складывает" билды. Если откроете код страницы, то увидите там такое

<script type="module" src="http://[::1]:5173/@vite/client"></script>
<link rel="stylesheet" href="http://[::1]:5173/resources/assets/css/app.scss" />

Этот режим предназначен для разработки, все изменения в файлах применяются "на лету".

Когда вам нужно сбилдить готовые ассеты, выполните npm run build - и все нужные файлы появятся в public/build/.

Answer 2

[pLavrenov]

Команды:
vite
vite build

css файл добавляется через импорт в сборку.