Почему не срабатывают стили на продакшен, vite?

Question

[Hfnas]

Добрый день!

Подскажите, пожалуйста. Переношу проект с локалхост на продакшен, т.е. на боевой сервер.
На локалке собираю стили с помощью команды (стоит sail):
npm run dev.
И у меня возникли вопросы:
1) После каждого ./vendor/bin/sail up приходится пересобирать стили с помощью команды npm run dev ,
иначе сбрасываются стили стартового набора breeze. Это норма?
2) Перед тем , как залить на продакшен , я запускаю npm run build, и закачиваю папку build на продакшен, но стили стартового набора по прежнему сломаны на продакшене.
3) Даже, если я сделаю npm run build на локалке, стили стартового набора breeze после ./vendor/bin/sail up все равно сбросились, и приходится по новой запускать npm run dev ,то есть я возвращаюсь к первому вопросу.

Основная суть вопроса, подскажите, пож-ста, как сделать, чтобы стили сформированные никогда не сбрасывались. Стили и яваскрипт пишу в resources/css и resources/js

Я стили подключаю в блейде:

@section('js')
    @vite('resources/js/app.js')
@stop

`vite.config.js`

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                // 'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Ребят, помогите, пож-ста, куда копать. Я в ларавел новичок, в симфони намного проще собрала стили для продакшен на локалке, и отправила на продакшен. (и никакие стили не сбрасываются) А ларавел сложный.

Comments

[iljaGolubev]

• 
  Я стили подключаю в блейде:
  @section('js')
  @vite('resources/js/app.js')
  @stop
  

  
  фигня какая то. 1 - это не `стили`/ 2 - зачем в section/stop.
  вот "стартовый набор breeze".
  
• в resources/js/app.js есть импорт resources/css/app.css?
  
• npm run dev - это не команда для "сборки" , а запуски сервера разработки.
  
• npm run build - делает "сборку" js, css и прочего. ТОЛЬКО ФРОНТ! если вы поставили breeze локально, а на прод залили только public/build... неправильно это. впрочем зависит от того как код организован.
  
• ну и самое главное - что значит "но стили стартового набора по прежнему сломаны на продакшене." ? что в консоли, что в генерируемом html?
  

[Hfnas]

iljaGolubev, спасибо большое за ответ!
> в resources/js/app.js есть импорт resources/css/app.css?

В этом и фигня была, поэтому ничего не работало, вернула как было :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                 'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

и убрала из resources/js/app.js импорт resources/css/app.css,
правильно сформировалась карта manifest.json вида:

{
  "resources/css/app.css": {
    "file": "assets/app-e0a0d534.css",
    "isEntry": true,
    "src": "resources/css/app.css"
  },
  "resources/js/app.js": {
    "file": "assets/app-c98dfa20.js",
    "isEntry": true,
    "src": "resources/js/app.js"
  }
}

Не знаю, почему, но все исправилось.
Что я на локалке сделала команду npm run build, и на сервер закачала папку `build`
И все стили на сервере встали, почти как на симфони.

Вопрос, вы стили на продакшен формируете на локалке, а потом закачиваете на сервер?

[iljaGolubev]

Hfnas, по разному. В общем случае - есть отдельный сервер сборки php и js. На прод заливается уже собранная версия. Бывает, что приходится локально собирать.
Не очень понимаю почему вы только build заливаете. для чего тогда Ларавель вообще.

[Hfnas]

iljaGolubev, самое интересное, почему-то генерация стилей/шаблона/яваскрипт происходило, когда я сделала

npm run dev

, при этом в 'resources/js/app.js' есть импорт 'resources/css/app.css'б а когда убрала импорт, приходится только обновлять страницу при каждом изменении. Странно конечно, почему так произошло.

[iljaGolubev]

Hfnas, сложно сказать, не видя проекта.
Проверьте что в vite.config.js . Вот пример

refresh: true отвечает за полную перезагрузку страницы (поменялся .env, *.congig.js). Но иногда непонятное поведение. и тогда refresh:[] помогает.