How to target @import inside an external CSS file loaded with <link> tag using JS or Jquery

Question

I'm using a third party JS library that loads minified CSS assets by appending a link HTML tag to the head .

Inside of that CSS file there are few @import (at-rules) that imports an old version of font awesome which overrides the one I have. How can I remove that @import rule?

I've tried to use

var styleTag = document.querySelector('link[href="https://external_file.css"]')

var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

sheet.deleteRule (2); //the @import I want to delete is the third rule in the css document

however that code disables few more CSS rules in that document probably because it's minified

Is there any solution to this?

Answer 1

Not tested but you can try this approach.

Include your css properties in a separate file. Let application first load the minified css. Then load your css files.

For example first.css

#something{
  color: #FFF;
 }

And then in the second file:

 #something{
  color: #000;
 }

In this case background-color from second file will be applied