Как использовать Vite вместе с sass внутри docker?

от
prokoding.ru > Laravel > Как использовать Vite вместе с sass внутри docker?

Для использования Vite вместе с Sass внутри Docker можно следовать следующим шагам:

  1. Создайте новый проект Laravel, если его еще нет. Вы можете использовать команду composer create-project --prefer-dist laravel/laravel имя-проекта для создания нового проекта Laravel.
  1. Перейдите в папку с проектом Laravel, используя команду cd имя-проекта.
  1. Установите Vite, используя команду npm init @vitejs/app и следуйте инструкциям в терминале. Введите имя проекта и выберите опцию с Sass.
  1. После установки Vite перейдите на уровень папок, где находится ваш проект Laravel, и найдите папку имя-проекта.
  1. Внутри папки имя-проекта найдите файл package.json. Откройте его с помощью редактора кода и добавьте в него следующий скрипт:
"scripts": {
  "dev": "cd имя-проекта && vite",
  "build": "cd имя-проекта && vite build",
  "serve": "cd имя-проекта && vite preview"
}
  1. Затем вернитесь на уровень папок, где находится ваш проект Laravel, и откройте файл docker-compose.yml. Внутри файла добавьте следующий код для настройки контейнера Docker:
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/var/www/html
  vite:
    image: node:latest
    volumes:
      - ./имя-проекта:/app
    working_dir: /app
    command: npm run dev
  1. Создайте файл Dockerfile на уровне папок вашего проекта Laravel. Внутри файла добавьте следующий код для настройки образа Docker:
FROM php:7.4-fpm

RUN apt-get update && apt-get install -y 
    build-essential 
    libpng-dev 
    libjpeg62-turbo-dev 
    libonig-dev 
    libxml2-dev 
    libzip-dev 
    zip 
    unzip

RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd zip

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

COPY . .
  1. После этого можно запустить проект с помощью команды docker-compose up -d. Docker-compose соберет и запустит контейнеры для проекта Laravel и Vite.
  1. После того, как проект запустится, можно открыть браузер и перейти по адресу http://localhost:3000, чтобы увидеть результат.

Теперь у вас есть проект Laravel, использующий Vite и Sass, работающий внутри Docker контейнера. Вы можете настраивать и разрабатывать свое приложение Laravel, используя Vite для сборки и Sass для стилей, все это с помощью Docker.