Hi Arman

After checking of your codebase, here's the fix:

The CSS variables need to properly defined in :root and Vite is properly compiling the SCSS files. In Metronic's, these variables are defined in _root.scss and imported in the build process.

in resources/css/app.css to include:

@import '../sass/style.scss';

Then update your vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css', 
                'resources/sass/style.scss', 
                'resources/js/app.js'
            ],
            refresh: true,
        }),
        tailwindcss(),
    ],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "resources/sass/_init.scss";`,
            },
        },
    },
});

Hi Arman

1. Make sure your main SCSS import is correct Create or modify your main SCSS file (resources/scss/app.scss) to include:

// Import Metronic initialization first
@import "/metronic/demo1/sass/_init";

// Then import the rest of the Metronic styles
@import "/metronic/demo1/sass/style";

2. Update your Vite configuration In your vite.config.js:

// ... existing code ...
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                // other inputs...
            ],
            refresh: true,
        }),
        // Make sure the SCSS resolver is properly configured
        {
            name: 'sass-resolver',
            resolveId(id) {
                // Ensure paths to Metronic SCSS are resolved correctly
                if (id.startsWith('~')) {
                    return id.replace('~', '');
                }
            }
        }
    ],
    resolve: {
        alias: {
            // Add proper aliases for Metronic paths
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '~metronic': path.resolve(__dirname, 'resources/_keenthemes/src/metronic')
        }
    },
    // ... existing code ...
});

3. Check for a missing root styles generator In Metronic, there's a specific file /metronic/demo1/sass/_root.scss Then, make sure it properly imported in /metronic/demo1/sass/components/components.scss

4. Force a complete rebuild Run: npm run dev With the --force flag if needed: npm run dev -- --force

This should resolve the missing CSS variables issue. If you're still facing problems, it might be helpful to check the exact structure of your Metronic installation.

Hi Arman,

Sorry for the delay in response. Are you working on your own Laravel integration with HTML from scratch?

You can try to import the style entry file sass/styles.scss file into your Laravel vite.

Thanks