Metronic custom variables are not set
I used Metronic 8 as a template inside Laravel 12, but when I compile scss file using Vite custom Metronic css variables not compiling, for example in dev tools it says: --bs-primary-inverse is not set, all custom variables are not set. also I used text-white as class but it won't work (--bs-text-white is not set).
Replies (4)
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
Yes I am. I did the same thing by importing sass/styles.scss but I don't know why it won't compile it as it should.
