Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make possibility pass build directory #1272

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

truechernyshov
Copy link

Currently, the build directory for Vite is hardcoded in modules/system/classes/asset/Vite.php as /assets/dist. However, a theme may have multiple frontends or skins, making it necessary to compile assets into different directories, which Vite supports. Unfortunately, the current PHP code always attempts to find the manifest.json file in /assets/dist. To address this, there needs to be a way to configure the build directory dynamically.

@mjauvin mjauvin requested review from jaxwilko and removed request for jaxwilko December 13, 2024 15:27
@mjauvin mjauvin added the maintenance PRs that fix bugs, are translation changes or make only minor changes label Dec 13, 2024
@mjauvin mjauvin requested a review from jaxwilko December 13, 2024 15:28
@mjauvin mjauvin added the needs review Issues/PRs that require a review from a maintainer label Dec 13, 2024
@mjauvin mjauvin self-assigned this Dec 13, 2024
@LukeTowers
Copy link
Member

@truechernyshov can you provide a usage example?

@truechernyshov
Copy link
Author

truechernyshov commented Dec 14, 2024

@LukeTowers

Compile theme like this

VITE_THEME_SKIN=tomato php artisan vite:compile theme-skins

Vite config example

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

const skinKebabCase = (process.env.VITE_THEME_SKIN || 'black').toLowerCase()

export default defineConfig({
    build: {
        outDir: `assets/${skinKebabCase}`,
        assetsDir: '',
    },
    plugins: [
        laravel({
            publicDirectory: `assets/${skinKebabCase}`,
            input: [
                `src/assets/${skinKebabCase}/css/main.css`,
                'src/main.js',
            ],
            refresh: {
                paths: [
                    './**/*.htm',
                    './**/*.block',
                    'src/**/*.css',
                    'src/**/*.js',
                ]
            },
        }),
        vue(),
    ],
});

Twig

{{ vite(['css/main.css', 'js/main.js'], 'theme-skins', 'assets/' ~ skin) }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
maintenance PRs that fix bugs, are translation changes or make only minor changes needs review Issues/PRs that require a review from a maintainer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants