quasar-template-default
quasar-template-default copied to clipboard
CSS import order different for "quasar dev" and "quasar build"
I am having issues with the css import order when building the default app; Specifically material-icons.css has precedence over quasar-mat-css after
building, but it's the other way around in dev mode.
I found similar report on the forum: http://forum.quasar-framework.org/topic/989/the-compact-css-generated-with-quasar-build-mat-quasar-does-not-match-to-the-quasar-mat-css-in-dev-environment
To reproduce:
quasar init
and add a <q-fab color="primary" icon="add" direction="left"></q-fab>
to the template.
Icon is centred after viewing with quasar dev
, but after building with quasar build
the icon is shifted up. Inspection of the generated css shows that the order for dev and build is different: 'material-icons.css' has precedence over 'quasar-mat-css' in build mode
Also switching off purifyCss
doesn't help.
I have added a a repo demonstrating the issue here: https://github.com/tdamsma/quasar-css-import-bug
I have the same problem. I encountered it when I couldn't understand why my icons are suddenly not centered. Thanks for catching this! @tdamsma did you find a workaround on how to compile this so it will work until the issue is solved?
Unfortunately not. I wasted some time on it but couldn't figure how or where to solve this.
On 10 Nov 2017 14:46, "Omri Har-Shemesh" [email protected] wrote:
I have the same problem. I encountered it when I couldn't understand why my icons are suddenly not centered. Thanks for catching this! @tdamsma https://github.com/tdamsma did you find a workaround on how to compile this so it will work until the issue is solved?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar-template-default/issues/47#issuecomment-343477408, or mute the thread https://github.com/notifications/unsubscribe-auth/AHgZUzrN08z5Kkj4VtD2KBGQ-ahQ5MNoks5s1FPOgaJpZM4QEYkg .
Can you please set purifyCSS: false
in config/index.js and check if the problem persists?
Ah, sorry, I didn't read that you already tried it.
@pdanpdan, can you perhaps clone the repo and check if you can reproduce the error? Want to be sure it is not just something with my local setup
Ok, I found it on that repo. It needs a reordering of imports in main.js. You have a PR in the repo.
@pdanpdan that solved it, thanks a lot! Will you also submit that PR for this repo? I think everyone can benefit from this.
We'll have a new template soon, so it's no need.