EwrNov.css overshadows certain portions of custom css file

Question

I'm working on SP 2013 On Premise, In my site i am using a custom css file (reference for which is provided in the master page). In some pages we are using Excel access Web part. I noticed using Chrome developer tool that if a page has this web part then all the css files (including custom css) are loaded first and then at last there is a file called EwrNov.css which is loaded.

Now this causes the existing css to change in the page and the page layout appears to be very clunky. Any Idea how I can unload this EWrNov.css altogether so that the custom styling will get reflected without any issue.

In developer tool I noticed that this css file is initiated by a JS file called EWaMoss.js

Any help would be appreciated, I'm stuck trying to load my css file again, after this EwaMoss.js gets loaded, from masterpage

Answer 1

stylesheets have a disabled property

So, after the page/sheet has loaded, you can get its DOM element and disable it

Something like:

var sheet=document.querySelector("style[href*='EWr']");
if(sheet) sheet.disabled = true;

---

or play with document.stylesheets.. BUT .. this will not include stylesheets loaded by JS files, only stylesheets in the page it got from the server.

The second stylesheet (in my tenant) in the page is Core SharePoint;

So

document.styleSheets[1].disabled=true;

Takes away all Core CSS

CSS is powerfull stuff; which everyone taking the React only route will most likely never learn