127 lines
4.1 KiB
Markdown
127 lines
4.1 KiB
Markdown
# 🎨 Руководство по исправлению проблем со стилями CMS в Docker
|
||
|
||
## 🔍 Проблема
|
||
Стили Tailwind CSS не загружаются в Docker контейнере, но работают в локальной разработке.
|
||
|
||
## ✅ Решение
|
||
|
||
### 1. Исправленные файлы:
|
||
|
||
#### `src/app/globals.css`
|
||
```css
|
||
@import "tailwindcss/preflight";
|
||
@import "tailwindcss";
|
||
```
|
||
**Вместо:** `@import "tailwindcss";` и `@import "tw-animate-css";`
|
||
|
||
#### `next.config.ts`
|
||
```typescript
|
||
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. Команды для пересборки:
|
||
|
||
```bash
|
||
# Остановка и полная пересборка
|
||
cd protekauto-cms
|
||
./rebuild-cms.sh
|
||
|
||
# Или вручную:
|
||
docker-compose down protekauto-cms
|
||
docker rmi protekauto-cms_protekauto-cms
|
||
docker-compose up --build -d protekauto-cms
|
||
```
|
||
|
||
## 🔧 Диагностика
|
||
|
||
### Проверка локальной сборки:
|
||
```bash
|
||
npm run build
|
||
ls -la .next/static/css/
|
||
```
|
||
|
||
### Проверка в контейнере:
|
||
```bash
|
||
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` |