如何使用 JS 或 Jquery 在使用 <link> 标签加载的外部 CSS 文件中定位 @import答案

【问题标题】：How to target @import inside an external CSS file loaded with <link> tag using JS or Jquery如何使用 JS 或 Jquery 在使用 <link> 标签加载的外部 CSS 文件中定位 @import
【发布时间】：2016-11-09 14:36:11
【问题描述】：

我正在使用第三方 JS 库，它通过将 link HTML 标记附加到 head 来加载缩小的 CSS 资产。。 p>

在该 CSS 文件中，很少有 @import (at-rules) 会导入旧版本的字体 awesome，它会覆盖我拥有的字体。如何删除该 @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 规则，可能是因为它被缩小了

有什么解决办法吗？

【问题讨论】：

标签： javascript jquery html css optimization

【解决方案1】：

未测试，但您可以尝试这种方法。

将您的 css 属性包含在单独的文件中。让应用程序首先加载缩小的 css。然后加载你的 css 文件。

例如 first.css

#something{
  color: #FFF;
 }

And then in the second file:

 #something{
  color: #000;
 }

在这种情况下，将应用第二个文件中的background-color

【讨论】：

感谢您的回答，这在正常情况下可以正常工作，但在我的情况下，在页面完全加载后请求 CSS 文件，以便 CSS 始终优先。