Для того чтобы сделать несколько скомпилированных стилей ViteJS в Laravel, вам потребуется следовать нескольким шагам.
1. Установка и настройка ViteJS в Laravel:
Сначала вам нужно установить и настроить ViteJS в Laravel проекте. Для этого выполните следующие шаги:
- Установите ViteJS путем выполнения команды npm install в директории вашего Laravel проекта.
- Создайте файл конфигурации ViteJS vite.config.js в корневой папке проекта.
- В vite.config.js определите ваши стили и их исходные файлы.
import { defineConfig } from 'vite'
export default defineConfig({
css: {
postcss: {
plugins: []
},
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/variables.scss";'
}
}
}
})
В приведенном примере мы определили scss как препроцессор и добавили импорт переменных из variables.scss.
- Обновите ваш файл package.json, добавив следующие скрипты:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"build:production": "VITE_ENV=production vite build"
}
}
Вам понадобятся две команды: dev и build. dev будет использоваться во время разработки, а build - для сборки проекта.
2. Компиляция нескольких стилей:
Компиляция нескольких стилей в Laravel с использованием ViteJS достигается путем создания нескольких точек входа и импорта этих точек в вашем приложении.
- Создайте необходимые стили в директории resources/css.
- В вашем файле app.blade.php используйте следующий код для импорта скомпилированных стилей:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- ... -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" href="{{ mix('css/custom.css') }}">
</head>
<body>
<!-- ... -->
</body>
</html>
- Выполните сборку проекта, запустив команду npm run build.
В результате выполнения этой команды будут сгенерированы скомпилированные стили и сохранены в папку public/css.
- После того, как скомпилированные стили созданы, вы можете использовать их в своем проекте, например, импортировать их в ваши компоненты и стилизовать элементы на странице.
Итак, таким образом, вы можете создать несколько скомпилированных стилей ViteJS в Laravel, настроив ViteJS и компилируя требуемые стили.