Metronic 9 angular update to 9.3.1 styles issues
I have a working angular project with metronic 9.21. I now want (need) the bugfixes from 9.3.1. I tried using the files from metronic-tailwind-html-demos/dist/assets and overwriting my local files with these.
Now I get many syntax warnings from the styles.css:
Expected identifier but found "&" [css-syntax-error]
src/assets/css/styles.css:6169:39:
6169 │ .kt-menu-item.show > .kt-menu-link.& {
These errors makes sense, as css does not have "&" as a feature. why is this in there?! My older styles.css from 9.21 has valid code like:
.kt-menu-item-show\:text-foreground.kt-menu-item.show,
.kt-menu-item.show>.kt-menu-link .kt-menu-item-show\:text-foreground,
.kt-menu-item.show>.kt-menu-label .kt-menu-item-show\:text-foreground,
.kt-menu-item.show>.kt-menu-toggle .kt-menu-item-show\:text-foreground {
color: var(--foreground)
}
I cant update with these errors.
Replies (10)
Seems to work. Thanks!
Hi
Sorry for the delay. The issue was with Metronic CSS itself and not KTUI.
We will include the fix in the next Metronic weekly updates.
/metronic-tailwind-html-demos/src/css/components/menu.css
https://gist.github.com/faizalmy/8d45a015e63afee04677a4b44a0b4c16
You can use this if you want to rebuild Metronic assets yourself.
Thanks
Yes.
9.3.2 had the "&" in it. (Compilation was wrong, missing)
9.3.3 has the ".." in it. (Compilation errors? )
Hi Samuel,
Are you using v9.3.3?
I get the same errors like when i compiled it myself:
.kt-menu-item.here > .kt-menu-link..kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-label .kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-label..kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-toggle .kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-toggle..kt-menu-item-here\:text-primary {
color: var(--primary);
}
Again here the double points. One point would be valid css:
.kt-menu-item.here > .kt-menu-link.kt-menu-item-here\:text-primary {
color: var(--primary);
}
So not fixed yet.
Hi Samuel Reinfelder
Please try with the latest version. Get the assets from the HTML version.
Thanks
Thanks!
After compiling the styles.css still has around 100 errors in it:
.kt-menu-item.here>.kt-menu-toggle..kt-menu-item-here\:text-mono {
color: var(--mono);
}
(the double point). Manually fixing these seems to fix the styles.css. It feels a bit hacky though.
Hi Samuel Reinfelder
Here is a workaround. From the HTML version /metronic-tailwind-html-demos
Please update package.json scripts:
"build:css": "npx @tailwindcss/cli -i ./src/css/styles.css -o ./dist/assets/css/styles.css && npx postcss ./dist/assets/css/styles.css --replace --use postcss-nesting --no-map",
"build:prod": "npx @tailwindcss/cli -i ./src/css/styles.css -o ./dist/assets/css/styles.css --minify && npx postcss ./dist/assets/css/styles.css --replace --use postcss-nesting --no-map && npx webpack --env production",Run command "npm install --save-dev postcss-cli"
Then rebuild the assets using "npm run build" command.
Thanks
Any updates on this?
Hi Samuel Reinfelder
Sorry for the inconvenience. We will fix this issue.
Thanks
