Почему Vite вообще не создает файл app.css?

Содержание

Вопрос или проблема
Ответ или решение
1. Проверка подключения CSS файла
2. Проверка корректности конфигурации Tailwind CSS
3. Убедитесь, что стили компилируются
4. Обновление зависимостей
5. Проверка конфигурации PostCSS
6. Уведомления об ошибках
7. Проверка консоли разработчика
Заключение

Вопрос или проблема

Я использую Laravel с FilamentPHP, административная панель готова. Теперь я начал добавлять фронтенд-часть, как я могу выяснить, почему файл .css отсутствует в /public/build/assets?

Я пробовал npm run dev и npm run build.

Спасибо

Моя конфигурация vite:

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

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

Мой макет приложения:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title> {{ isset($title) ? $title . ' - ' : '' }}{{ config('app.name', '') }}</title>

    <!-- Шрифты -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Скрипты -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Стили -->
    @livewireStyles

</head>

Конфигурационный файл Tailwind:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

Конфигурация Postcss:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Файл package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "autoprefixer": "^10.4.20",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.47",
        "tailwindcss": "^3.4.12",
        "vite": "^5.4.7"
    }
}

λ npm run build

> build
> vite build

vite v5.4.7 building for production...
✓ 53 модуля преобразовано.
public/build/manifest.json            0.29 kB │ gzip:  0.15 kB
public/build/assets/app-l0sNRNKZ.js   0.00 kB │ gzip:  0.02 kB
public/build/assets/app-z-Rg4TxU.js  35.05 kB │ gzip: 14.08 kB
✓ собрано за 1.70s

Я пытался удалить node_modules и переустановить с помощью npm i. Также обновил Node до версии v20.17.0

Ответ или решение

Причин, по которым Vite может не создавать файл app.css, может быть несколько. Давайте рассмотрим основные шаги для диагностики проблемы и её решения.

1. Проверка подключения CSS файла

В вашем конфиге Vite вы подключаете app.css правильно:

laravel({
    input: ['resources/css/app.css', 'resources/js/app.js'],
    // ...
}),

Убедитесь, что файл resources/css/app.css существует и содержит CSS-код, который вы ожидаете. Если файл пуст или отсутствует, Vite не создаст его в public.

2. Проверка корректности конфигурации Tailwind CSS

Проверьте, правильно ли настроена конфигурация Tailwind CSS. Ваш файл конфигурации Tailwind (tailwind.config.js) указывает, где искать классы, которые будут скомпилированы. Убедитесь, что вы добавили правильные пути к вашим Blade-шаблонам, чтобы все используемые классы были найдены.

content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],

Если у вас есть другие Blade-шаблоны или компоненты, использующие классы Tailwind, их также следует добавить в список content.

3. Убедитесь, что стили компилируются

Проверьте, вызывается ли файл app.css при сборке. Для этого посмотрите на вывод консоли после выполнения команды npm run build. Если в консоли нет упоминаний о CSS, то проблема может быть в самой конфигурации.

4. Обновление зависимостей

Вы упомянули, что удалили папку node_modules и переустановили зависимости. Также следует убедиться, что у вас установлены последние версии всех зависимостей. Используйте команду:

npm outdated

Это покажет, есть ли доступные обновления для ваших библиотек. Если есть, обновите их.

5. Проверка конфигурации PostCSS

Убедитесь, что ваш postcss.config.js настроен правильно. У вас все выглядит хорошо, но проверьте, нет ли синтаксических ошибок:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

6. Уведомления об ошибках

После выполнения npm run build, проверьте вывод на наличие ошибок или предупреждений. Если что-то идет не так, Vite может пропустить создание CSS-файла, если имеются ошибки в JavaScript или в CSS.

7. Проверка консоли разработчика

Если вы используете команду npm run dev, откройте консоль браузера и проверьте, загружается ли app.css и отсутствуют ли ошибки загрузки.

Заключение

Если ни один из вышеперечисленных методов не помог выявить проблему, возможно, стоит проверить другие элементы конфигурации вашего проекта или даже создать минимальный проект с только Vite и TailwindCSS для изоляции проблемы.

Надеюсь, эти шаги помогут вам разобраться, почему файл app.css не создается. Если у вас остались вопросы, не стесняйтесь задавать их!