Question

请在下面参考我的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中，我的徽标为sample1.jpeg，而custom.css的徽标为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));
              }
          }

Answer 1

我们修复了我在index.html中添加的以下代码，并更改了CSS加载部分的顺序。在加载期间，我们检查布尔值是否为true，然后我们将检查是否启用了自定义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);
        }

自定义css网址在styles.css之后加载-角度10

1 个答案: