CSS import order different for "quasar dev" and "quasar build"

[tdamsma]

trafficstars

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

[omrihar]

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?

[tdamsma]

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 .

[pdanpdan]

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.

[tdamsma]

@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

[pdanpdan]

Ok, I found it on that repo. It needs a reordering of imports in main.js. You have a PR in the repo.

[tdamsma]

@pdanpdan that solved it, thanks a lot! Will you also submit that PR for this repo? I think everyone can benefit from this.

[pdanpdan]

We'll have a new template soon, so it's no need.