हमारे पास एक एम्बेडेड वेब ऐप है जिसकी आवश्यकता है कि ऐप के निर्माण और तैनात होने के बाद इसे एक इंटीग्रेटर द्वारा फिर से ब्रांडेड करने में सक्षम होना चाहिए। आवश्यकता बताती है कि इंटीग्रेटर एक branding.css अपलोड कर सकता है जो मौजूदा शैलियों को ब्रांड रंगों आदि के साथ ओवरराइड कर देगा।

समस्या यह है कि इस आवश्यकता को कोणीय और कोणीय सीएलआई के साथ समायोजित करना असंभव लगता है। मैं एक हैकी पोस्ट-प्रोसेसिंग पायथन स्क्रिप्ट लिखने से पहले यहां दोबारा जांच करना चाहता था जो काम पूरा करता है।

मूल रूप से, मैं केवल एक ng build करने के बाद चाहता हूं, मैं चाहता हूं कि मेरा index.html इस तरह दिखे:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title [translate]="'index.title'"></title>
    <base href="/">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.f14ea32bf407dc2d4831.bundle.css" rel="stylesheet" />
    <link href="branding.css" rel="stylesheet" />
</head>

इस तरह branding.css अंतिम है, जिसका अर्थ है कि वहां की कोई भी कक्षा स्टाइल बंडल में मौजूद क्लास को ओवरराइड कर देगी और इंटीग्रेटर उस एक फ़ाइल को पार्टनर की ब्रांडिंग के साथ अधिलेखित कर सकता है। क्या ऐसा करने का कोई तरीका है (या समान)?

3
Gillespie 12 फरवरी 2019, 18:41

1 उत्तर

आप <head> के बजाय <body> के अंत में <link href="branding.css" rel="stylesheet" /> जोड़ सकते हैं। एक महान अभ्यास नहीं है, लेकिन इस मामले में यह समझ में आ सकता है।

आपका स्रोत index.html:

<head>
  <!--Base, title, meta tags-->
</head>
<body>
  <my-app></my-app>
  <!--Branding style overrides-->
  <link href="branding.css" rel="stylesheet" />
</body>

और निर्माण के बाद, आपको मिलना चाहिए:

<head>
  <!--Base, title, meta tags-->
  <link href="styles.f14ea32bf407dc2d4831.bundle.css" rel="stylesheet" />
</head>
<body>
  <my-app></my-app>
  <!--Branding style overrides-->
  <link href="branding.css" rel="stylesheet" />
  <script type="text/javascript" src="main.js">
</body>

चूंकि एंगुलर शैलियों को <head> में इंजेक्ट करता है, इसलिए आपकी ब्रांडिंग सीएसएस बाद में दस्तावेज़ में आएगी और इसमें उच्च विशिष्टता होगी।

एमडीएन का कहना है...

एक <link> तत्व या तो <head> या <body> तत्व में हो सकता है, यह इस पर निर्भर करता है कि उसके पास एक लिंक प्रकार है जो बॉडी-ओके है। उदाहरण के लिए, स्टाइलशीट लिंक प्रकार बॉडी-ओके है, और इसलिए बॉडी में <link rel="stylesheet"> की अनुमति है। हालांकि, यह पालन करने के लिए एक अच्छा अभ्यास नहीं है; अपने <link> तत्वों को अपने शरीर की सामग्री से अलग करना, उन्हें <head> में रखना अधिक समझदारी है।

1
Alex K 12 फरवरी 2019, 21:54