protekauto-cms/CSS_FIX_GUIDE.md

🎨 Руководство по исправлению проблем со стилями CMS в Docker

🔍 Проблема

Стили Tailwind CSS не загружаются в Docker контейнере, но работают в локальной разработке.

✅ Решение

1. Исправленные файлы:

src/app/globals.css

@import "tailwindcss/preflight";
@import "tailwindcss";

Вместо: @import "tailwindcss"; и @import "tw-animate-css";

next.config.ts

const nextConfig = {
  output: 'standalone',
  
  // Исключаем favicon из обработки как страницу
  async rewrites() {
    return [];
  },
  
  // CSS настройки (optimizeCss отключен из-за проблем с critters)
  // experimental: {
  //   optimizeCss: true,
  // },
  
  // Настройки для изображений
  images: {
    unoptimized: true,
    domains: ['localhost'],
  },
  
  // Настройки webpack для CSS
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!dev && !isServer) {
      config.optimization.splitChunks.cacheGroups.styles = {
        name: 'styles',
        test: /\.(css|scss)$/,
        chunks: 'all',
        enforce: true,
      };
    }
    return config;
  },
};

2. Используйте оптимизированный Dockerfile:

Dockerfile.optimized

• Multi-stage build для лучшей оптимизации
• Правильная обработка CSS на этапе сборки
• Проверка создания CSS файлов

3. Команды для пересборки:

# Остановка и полная пересборка
cd protekauto-cms
./rebuild-cms.sh

# Или вручную:
docker-compose down protekauto-cms
docker rmi protekauto-cms_protekauto-cms
docker-compose up --build -d protekauto-cms

🔧 Диагностика

Проверка локальной сборки:

npm run build
ls -la .next/static/css/

Проверка в контейнере:

docker exec -it protekauto-cms ls -la .next/static/css/

🚨 Частые проблемы

1. Tailwind CSS v4 синтаксис

• ❌ @tailwind base;
• ✅ @import "tailwindcss/preflight";

2. Экспериментальные функции

• ❌ optimizeCss: true (требует critters)
• ✅ Отключено для стабильности

3. Standalone режим

• ✅ Включен для Docker оптимизации
• Может вызывать проблемы при сборке

4. CSS не загружается в браузере

• Проверьте Network tab в DevTools
• Убедитесь, что CSS файлы доступны по пути /_next/static/css/

📋 Чек-лист исправления

• Обновлен globals.css с правильными импортами
• Обновлен next.config.ts с правильными настройками
• Отключен optimizeCss (если есть проблемы с critters)
• Используется Dockerfile.optimized
• Локальная сборка проходит успешно
• CSS файлы создаются в .next/static/css/
• Контейнер пересобран с новыми настройками

🎯 Результат

После применения исправлений:

1. ✅ Локальная сборка проходит без ошибок
2. ✅ CSS файлы создаются корректно
3. ✅ Стили загружаются в Docker контейнере
4. ✅ Админка отображается с правильными стилями

📞 Поддержка

Если проблема не решена:

1. Проверьте логи контейнера: docker-compose logs protekauto-cms
2. Убедитесь, что все зависимости установлены
3. Попробуйте полную очистку: docker system prune -f