How to customize tabler theme using vite?

[realtebo]

I see no documentation about how to use vite with tabler to handle small customizations to the theme

[christmex]

Hi @realtebo

The idea is we just need to include it inside
config/backpack/ui.php you can find something like this inside that file

// -------------
    // GLOBAL STYLES
    // -------------

    // CSS files that are loaded in all pages, using Laravel's asset() helper
    'styles' => [
        // 'styles/example.css',
        // 'https://some-cdn.com/example.css',
    ],

    // CSS files that are loaded in all pages, using Laravel's mix() helper
    'mix_styles' => [ // file_path => manifest_directory_path
        // 'css/app.css' => '',
    ],

    // CSS files that are loaded in all pages, using Laravel's @vite() helper
    // Please note that support for Vite was added in Laravel 9.19. Earlier versions are not able to use this feature.
    'vite_styles' => [ // resource file_path
        // 'resources/css/app.css' => '',
    ],

    // --------------
    // GLOBAL SCRIPTS
    // --------------

    // JS files that are loaded in all pages, using Laravel's asset() helper
    'scripts' => [
        // 'js/example.js',
        // 'https://unpkg.com/[email protected]/dist/vue.min.js',
        // 'https://unpkg.com/react@16/umd/react.production.min.js',
        // 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
    ],

    // JS files that are loaded in all pages, using Laravel's mix() helper
    'mix_scripts' => [ // file_path => manifest_directory_path
        // 'js/app.js' => '',
    ],

    // JS files that are loaded in all pages, using Laravel's @vite() helper
    'vite_scripts' => [ // resource file_path
        // 'resources/js/app.js',
    ],

What do you think? let us know if you still found any issues

Cheer's

[christmex]

Reference about customization here

• https://backpackforlaravel.com/docs/6.x/base-how-to#create-a-new-theme-child-theme

But I think, the documentation it's not updated well, but don't worry @tabacitu and the team still working on it, just wait 😉.

[realtebo]

I understand how vite is working but ... which files should I include in which order to override something in tabler?

actually we are able to override color variables, and for now it's ok.