0

请参考下面我的 angular.json 配置

"options": {
            "outputPath": "dist/example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "extractCss": true,
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/stylings/main.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/stylings"
              ]
          },
            "scripts": []
          }

在 index.html 中，我正在加载自定义 css 并将 css 附加到 Dom 元素中。预期结果：它应该只应用custom.css，但它首先添加styles.css，然后添加custom.css .. 例如：在styles.css中，我有logo作为sample1.jpeg，custom.css有logo作为sample2 .jpeg。我可以先看到它显示 sample1.jpeg，然后是 sample2.jpeg。如何解决这个问题？

在 index.html 中，我有 resourcesToLoad 来订购加载，但它不遵守加载文件的顺序

 var resourcesToLoad = [
            {
            filename: "styles.css",
            elementType: "link",
            loadOrder: 1
        },
        {
            filename: "runtime.js",
            elementType: "script",
            loadOrder: 1
        },
        {
            filename: "polyfills.js",
            elementType: "script",
            loadOrder: 2
        },
        {
            filename: "scripts.js",
            elementType: "script",
            loadOrder: 2
        },
        {
            filename: "main.js",
            elementType: "script",
            loadOrder: 3
        }];

在代码中添加自定义css的代码

var domElement = undefined;
          if(CSS_ADDRESS){
              domElement = document.createElement("link");
              var loadStartTime = (new Date()).getTime();
              domElement.rel = "stylesheet";
              domElement.href = CSS_ADDRESS ;
              domElement.onerror = function () {
                  console.log("Load error for file: " + filename);
              }
              domElement.onload = function () {
                  var loadEndTime = (new Date()).getTime();
                  console.log('Custom CSS loaded in (ms): ' + (loadEndTime - loadStartTime));
              }
          }
4

1 回答 1

0

我们修复了我在 index.html 中添加以下代码并更改了 css 加载部分的顺序。在加载期间，我们检查布尔值是否为真，然后我们将检查自定义 CSS 是否启用。如果启用，那么我们应用自定义 css，否则使用基本 css

    var resourcesToLoad = [
        {
            filename: "styles.css",
            elementType: "link",
            loadOrder: 1,
            requiresCustomCSS: true
        },
        {
            filename: "runtime-es2015.js",
            elementType: "script",
            loadOrder: 1
        },
        {
            filename: "polyfills-es2015.js",
            elementType: "script",
            loadOrder: 2
        },
        {
            filename: "main-es2015.js",
            elementType: "script",
            loadOrder: 3
        }
    ];



        if (resource.elementType === 'link' && resource.requiresCustomCSS) {
            // This is done so that lag between loading the base css 
            // and custom css is as little as possible.
            var customElement = getCustomCSSElement();
            const head = document.getElementsByTagName('head')[0];
            document.body.appendChild(baseCSS_Element);
            customElement && document.body.appendChild(custom_CSS_Element);
        }
        else {
            document.body.appendChild(baseCSS_Element);
        }
于 2020-10-13T18:42:13.310 回答