search

Atyantik / pawjs

A highly scalable & plugable, Progressive Web Application Framework with the best Developer Experience. This framework utilizes the power of React with Webpack and is build on top of webpack/tapable for unlimited extendability.
https://www.reactpwa.com
MIT License
165 stars 37 forks source link

CSS Load Order different in Dev vs Prod #45

Open muditjaju opened 4 years ago

muditjaju commented 4 years ago

I have the following import statements in my client.js file - 

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";
import "./resources/css/global.css";

In the development mode my global.css styles have higher preference than bootstrap which is as expected. But in Production the order of the CSS files loading changes with my custom css (global.css) loading before Bootstrap leading to an undesired situation.

I am using pawjs@3.0.0-beta.2

vaibhav-systango commented 4 years ago

Also @tirthbodawala @ankushtiwari-atyantik The dynamic css chunks generated via webpack doesn't loads on Firefox only the static css that's pre injected via server.js works

tirthbodawala commented 4 years ago

Let me check that.

On Fri, May 1, 2020 at 12:02 AM Vaibhav Gurnani notifications@github.com wrote:

Also @tirthbodawala https://github.com/tirthbodawala @ankushtiwari-atyantik https://github.com/ankushtiwari-atyantik The dynamic css chunks generated via webpack doesn't loads on Firefox only the static css that's pre injected via server.js works

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Atyantik/pawjs/issues/45#issuecomment-622026861, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWDN7663N3XZ3DVK7QLWHTRPG75HANCNFSM4MLTF4QA .

-- Tirth Bodawala Founder Atyantik Technologies w: www.atyantik.com e: tirthbodawala@atyantik.com

vaibhav-systango commented 4 years ago

@tirthbodawala @ankushtiwari-atyantik So this is how my style import looks like which works fine on chrome, this is generated by default in the build <link rel="preload" href="/css/05c4bf064c71d806ba51.css" as="style" onload="this.rel='stylesheet'">

Now when I refactor it to following in browser it starts working fine on firefox, as I think firefox doesn;t supports preload, so you have any solution to fix this ? <link rel="stylesheet" href="/css/05c4bf064c71d806ba51.css" >

vaibhav-systango commented 4 years ago

@tirthbodawala @ankushtiwari-atyantik any help ?