如何在加載了外部CSS文件中定位@import <link> 使用JS或Jquery標記

Question

我正在使用第三方JS庫，該庫通過在頭部添加鏈接 HTML標簽來加載較小的CSS資產 。

在該CSS文件中，很少有@import （規則），它可以導入舊版真棒字體，它可以覆蓋我的舊字體。 如何刪除該@import規則？

我嘗試使用

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

但是該代碼禁用了該文檔中的其他CSS規則，可能是因為它已縮小

有什么解決辦法嗎？

Answer 1

未經測試，但您可以嘗試這種方法。

在單獨的文件中包含CSS屬性。 讓應用程序首先加載縮小的CSS。 然后加載您的css文件。

例如first.css

#something{
  color: #FFF;
 }

And then in the second file:

 #something{
  color: #000;
 }

在這種情況background-color將應用第二個文件的background-color