css - 如果缺少所需的 css，则加载备用 css

Question

我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。

我有很多 css 文件，不想在每次发布后手动检查每个文件。

更新:

• 我希望这是一个运行时修复。意思是，如果浏览器找不到所需的 css，则它无法找到完整的 css。
• 当我修改和发布文件时，问题从未发生过。但是，我们有很多人致力于解决方案和更新 git 存储库。不知何故，一些用户无意中删除了 *.min.css 文件。这绝对不是故意的，也不应该发生。

有没有一种方法可以指定我需要 *.min.css 文件，但如果缺少它，则加载 *.css？

我知道最好是避免这个问题，但我的问题特别与故障安全的可能性有关。我的应用程序是由我的用户在他们自己的服务器上发布的，因此我无法控制他们所做的事情，并且拥有这样的选项会让我有更多的控制权和安全性。

更新 2:

另一个选项是一个自动化工具，以确保所有 *.min.css 文件都包含在最新的出版物中。理想情况下，它会找到所有 *.scss 文件并验证 *.min.css 是否存在，如果有任何缺失则发出一个标志。

Answer 1

听听@DavidG 的评论，解决发布问题。如果那真的真的不是一个选项，我想下一个最好的办法是让你的开发者改变捆绑/缩小系统，因此它可以适本地回退到未缩小的文件。我猜。

但是，如果您必须破解该问题，例如，如果您只是想暂时使用一个小书签来解决该问题，您可以使用 this answer 的衍生产品.像这样:

var links = document.querySelectorAll('head link[href*=".min.css"]');

for (var i = 0; i < links.length; i++) {
    var newLink = document.createElement("link");
    newLink.href = links[0].href.replace(".min.css", ".css");
    newLink.type = "text/css";
    newLink.rel = "stylesheet";
    newLink.media = "screen,print";
    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(newLink, head.firstChild);
}

不过，

不要考虑在生产场景中使用它。如果这样做，时空连续体将被撕裂，这个世界上所有剩余的独 Angular 兽都将被吸入深渊，并且可能是任何在生产中使用此代码的人。当然，我们不希望这样。