CSS import order different for "quasar dev" and "quasar build"
tdamsma opened this issue · comments
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?
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.