MIME- प्रकार के कारण शैलियाँ लोड नहीं हुईं

Question

मैं एक वेबसाइट पर काम कर रहा हूं, जो उपयोग करता है gulp जो ब्राउज़र को मेरे परिवर्तनों के साथ सिंक्रनाइज़ रखने के लिए संकलन और ब्राउज़र सिंक का उपयोग करती है।

Gulp टास्क सब कुछ ठीक से संकलित करता है, लेकिन वेबसाइट पर, मैं किसी भी शैली को देखने में असमर्थ हूं, और कंसोल इस त्रुटि संदेश को दिखाता है:

' Http: // स्थानीयहोस्ट: 3000 / एसेट्स / स्टाइल / कस्टम-स्टाइल.कैंस ' से स्टाइल लागू करने से इनकार कर दिया क्योंकि इसका MIME प्रकार ('टेक्स्ट / html') एक समर्थित स्टाइलशीट MIME प्रकार नहीं है, और सख्त MIME जाँच सक्षम है।

अब, मुझे सच में समझ नहीं आया कि ऐसा क्यों होता है।

HTML में इस तरह की फ़ाइल शामिल है (जो मुझे पूरा यकीन है कि सही है):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

और स्टाइलशीट अभी के लिए बूटस्ट्रैप और फ़ॉन्ट-भयानक शैलियों के बीच एक मर्ज है।

पथ सही है, क्योंकि यह फ़ोल्डर संरचना है:

index.html
assets
|-styles
  |-custom-style.css

लेकिन मुझे त्रुटि मिलती रहती है।

यह क्या हो सकता है? क्या यह कुछ (शायद एक सेटिंग है?) शायद gulp / browserync के लिए?

Comments

मुझे यह तब मिल रहा था जब मेरी लिंक की गई स्टाइलशीट एक html <स्टाइल ... टैग के साथ शुरू हुई थी, बजाय सीधे स्टाइल नियमों में कूदने के। बाद में भरी हुई html फ़ाइल (AngularJS) में लिंक करते समय मुझे यह भी मिला, इसलिए मैंने जावास्क्रिप्ट के माध्यम से पेज लोड पर गतिशील रूप से लोड करने के लिए स्विच किया और समस्या दूर हो गई।

— न्यूक्लिक

ऐसा तब होता है जब आप फ़ाइल में गलत URL सेट करते हैं या जब आपका सर्वर ठीक से कॉन्फ़िगर नहीं होता है। परिणाम में, ब्राउज़र DOESN'T को स्टाइलशीट नहीं मिलता है, लेकिन यह 404 स्टेटस और "कंटेंट-टाइप" हेडर के साथ कुछ HTML प्राप्त करता है। चूंकि ब्राउज़र को सर्वर से कुछ मिलता है, यह आपको नहीं बताता कि कोई जवाब नहीं है, लेकिन यह आपको बताता है कि फ़ाइल का MIME प्रकार गलत है। इसे जांचने का सबसे तेज़ तरीका केवल फ़ाइल http://localhost:3000/assets/styles/custom-style.cssको एक नए टैब में सीधे खोलने का प्रयास करना है ।

— रस्कॉडर

मेरे लिए यह वह मामला था जिसे रस्कोडर ने वर्णित किया था। इसके पीछे कारण यह था कि मैं कोणीय का उपयोग करता था और कोणीय फ़ाइल में एक css फ़ाइल को कोणीय पैकेजिंग में जोड़ना भूल गया था। इसलिए ऐप बनाते समय इसे नजरअंदाज किया गया।

— जना

मैं वसंत सुरक्षा कॉन्फ़िगरेशन द्वारा इस समस्या को ठीक करने में सक्षम हो सकता हूं। यह संसाधन फ़ोल्डर तक पहुंच को रोक रहा था।

— सांडू

खराब proxy.conf.jsonसेटअप ने हमें इस अजीब त्रुटि के लिए प्रेरित किया है, क्योंकि बैकएंड एपीआई को अग्रेषित करने का अनुरोध सही तरीके से काम नहीं कर रहा था, इस प्रकार एचटीएमएल त्रुटि प्रतिक्रिया।

— kangangop

Answer 1

Node.js अनुप्रयोगों के लिए, अपने कॉन्फ़िगरेशन की जाँच करें:

app.use(express.static(__dirname + '/public'));

ध्यान दें कि /publicअंत में आगे स्लैश नहीं है, इसलिए आपको इसे अपने HTML के अपने href विकल्प में शामिल करना होगा:

href="/css/style.css">

यदि आपने आगे स्लैश ( /public/) शामिल किया है तो आप बस कर सकते हैं href="css/style.css"।

Comments

मेरे मामले में href = "/ संपत्तियाँ / स्टाइल.कैश"> समस्या हल हो गई!

— सर्जियो गुर्जिक

Answer 2

मुझे लगता है कि मुद्दा, सीएसएस लाइब्रेरी के साथ टिप्पणियों के साथ शुरू हुआ था।

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

लाइब्रेरी को हटाकर उसे एक वेंडर फाइल में डाल दिया गया (जो कि बिना किसी टिप्पणी के हमेशा अलग रहता है) ने इस मुद्दे को हल किया।

फिर, मैं 100% यकीन नहीं कर रहा हूँ कि यह एक तय है, लेकिन यह अभी भी मेरे लिए एक जीत है क्योंकि यह अब उम्मीद के मुताबिक काम करता है।

Comments

एक आधा तय है क्योंकि अगर आप विक्रेता में यह सब नहीं डालना चाहते हैं, तो आपको क्या करना चाहिए? हर बार जब आप अपने ऐप का परीक्षण करते हैं तो नोड_मॉड्यूल्स को छोटा करें? दोह ... क्या आपको कुछ निश्चित मॉड्यूल संकलित करने के लिए कुछ मिला?

— स्टीमफायर

मेरी संकलन प्रक्रिया में, वेंडर फ़ाइल केवल बिल्ड पर बनाई जाती है और फिर मैं सिर्फ उन फाइलों पर बदलाव के लिए देखता हूं जो वास्तव में काम कर रहे हैं (जो आमतौर पर कुछ भी नहीं है जो विक्रेता में जाता है)। इसका मतलब यह है कि पहला निर्माण थोड़ा धीमा है, लेकिन फिर मैं बिना किसी संशोधन के अपनी फाइलों को संकलित करता हूं जो मेरे लिए प्रक्रिया को धीमा नहीं कर रहा है

— निक

मैं इसी मुद्दे में भाग गया और मैंने पाया कि मैं उस फ़ाइल के एक छोटा संस्करण को लोड करने की कोशिश कर रहा था जो सर्वर पर एक गैर-minified फ़ाइल के रूप में मौजूद थी। इसलिए, मैं "custom-style.min.css" को लोड करने की कोशिश कर रहा था जब सर्वर पर फ़ाइल "custom-style.css" थी। एक बार जब मैंने सही संसाधन को लोड करने के लिए अपना लिंक बदल दिया, तो सब कुछ ठीक रहा।

— प्रोग्रामर डैन

समस्या सीएसएस तक सीमित नहीं है। मुझे JS फाइल पर 404 भी मिला, जो पहली पंक्ति में एक टिप्पणी के कारण हुआ था।

— काले

Answer 3

यह त्रुटि तब भी आ सकती है जब आप अपनी CSS फ़ाइल को ठीक से संदर्भित नहीं कर रहे हों।

उदाहरण के लिए, यदि आपका लिंक टैग है

<link rel="stylesheet" href="styles.css">

लेकिन आपकी CSS फ़ाइल का नाम style.css(दूसरे s के बिना) है तो एक अच्छा मौका है कि आप इस त्रुटि को देखेंगे।

Comments

वास्तव में मेरे साथ क्या हुआ। मैंने यहाँ हर उत्तर की कोशिश की (mimetype को बदलें, CSS टिप्पणियों को हटाएं, नोड को बदलें। js config ...)। मुझे बस इतना करना था कि सीएसएस नाम में एक टाइपो को ठीक करना था। रवींद्र!

— एजेपेरेस

इस उत्तर को जोड़ने के लिए, सुनिश्चित करें कि gulp वास्तव में css फ़ाइल को मिला है और इसे आपके dist में पाइप कर दिया है। जब भी मुझे यह त्रुटि मिलती है, यह इसलिए होता है क्योंकि मैंने सीएसएस फाइलों में किसी तरह से अपना रास्ता खराब कर दिया है और यह अभी बिल्ड डायरेक्टरी में मौजूद नहीं है।

— LAdams87

हां, मेरे लिए समान, एक सरल और बेवकूफ टाइपो। मुझे लगता है कि यह क्या करता है कि सर्वर 404 प्रतिक्रिया पृष्ठ भेजता है, इसलिए आपका ब्राउज़र उस 404 पृष्ठ को प्राप्त करता है और आपको बताता है कि यह उचित सीएसएस नहीं है ... जो सच है।

— tanou

Answer 4

ज्यादातर मामलों में, यह बस सीएसएस फ़ाइल पथ गलत हो सकता है । इसलिए वेब सर्वर status: 404कुछ Not Foundसामग्री पेलोड के साथ लौटता हैhtml प्रकार के ।

ब्राउज़र <link rel="stylesheet" ...>सीएसएस शैलियों को लागू करने के इरादे से टैग से इस (गलत) पथ का अनुसरण करता है । लेकिन लौटाई गई सामग्री प्रकार विरोधाभासी है ताकि यह एक त्रुटि लॉग करे।

Comments

मेरा मुद्दा यह था कि रास्ता अमान्य था। लेकिन, यह खराब रास्ता मेरी कोणीय परियोजना के गलत होने के आधार href सेट के कारण हुआ। यदि आपके आधार href को अपडेट करने के बाद किसी और ने इस त्रुटि को देखना शुरू कर दिया, तो यह कारण हो सकता है।

— क्रेजको

परेशानी को पूरी तरह से और स्पष्ट रूप से दस्तावेज़ में लेने के लिए धन्यवाद कि कैसे सीएसएस फ़ाइल पर 404 त्रुटि यह (शुरुआत में) त्रुटि संदेश उत्पन्न कर सकती है

— वेलोजेट

समस्या निवारण के लिए एक और तरीका है, आप इस त्रुटि को दूसरे टैब पर पेस्ट कर रहे हैं, यदि आप सीएसएस नहीं देख रहे हैं, तो यह समस्या है

— BlackICE

आपके संकेत के लिए आपको धन्यवाद

— जेसन झोउ

Answer 5

कोणीय संरचना के अनुसार style.css फ़ाइल के ठीक नीचे / ऊपर एक फ़ोल्डर बनाएं और जैसे लिंक प्रदान करें <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">।

Comments

यह काम क्यों करता है? त्रुटि बताती है कि "टेक्स्ट / html" एक समर्थित MIME प्रकार नहीं है।

— जेम्स बेटसन

मेरे मामले में त्रुटि दूर हो गई, सीएसएस शैली, हालांकि, लागू नहीं होती हैं ..: /

— एंडरू

मैंने इस मुद्दे के बारे में पढ़ने में अधिक समय व्यतीत किया और एक css फ़ाइल के प्रकार को बदलने से ibto कुछ और गंभीर मुद्दों का कारण बन सकता है, जैसे कि css को सर्वर द्वारा html के रूप में पढ़ा जा रहा है

— Nick

AngularDart में, index.html के लिए रूट 'वेब' फ़ोल्डर है जो प्रोजेक्ट मुख्य फ़ोल्डर नहीं है। तो सभी css फाइलें वेब फोल्डर के अंदर होनी चाहिए। इस तरह "[प्रोजेक्टफॉल्डर] \ वेब [yourcssfileshere]"। इसलिए यदि आप वेब फ़ोल्डर के बाहर स्थित सीएसएस फ़ाइल को आयात करने का प्रयास करते हैं तो यह नहीं मिलेगा।

— वेल

Answer 6

मेरे पास बूटस्ट्रैप टेम्पलेट के लिए यह त्रुटि थी।

<link href="starter-template.css" rel="stylesheet">

फिर मैंने rel="stylesheet"लिंक से हटा दिया , यानी:

<link href="starter-template.css">

और सब कुछ ठीक काम करता है। यदि आप बूटस्ट्रैप टेम्प्लेट का उपयोग कर रहे हैं तो यह कोशिश करें।

Comments

अच्छी पकड़। अब त्रुटि हो गई है।

— रिच

के अनुसार लिविंग स्टैंडर्ड (4.2.4) , "एक लिंक तत्व या तो एक rel विशेषता या एक itemprop विशेषता, लेकिन दोनों नहीं होना चाहिए।" तो, relविशेषता को हटाने से एक स्टाइलशीट सहित कार्यक्षमता को हटा दिया जाता है।

— आर्टजोम बी।

यह मेरे लिए काफी अजीब था।

Answer 7

मैंने अपना 'href' -> 'src' बदल दिया है। तो इस से:

<link rel="stylesheet" href="dist/photoswipe.css">

इसके लिए:

<link rel="stylesheet" src="dist/photoswipe.css">

इसने काम कर दिया। मुझे पता नहीं क्यों, लेकिन इसने काम किया।

Comments

हालाँकि इसने मेरे लिए भी काम किया, क्या यह एक वैध विशेषता है?

— sr9yar

@ sr9yar आप सही हैं कि validator.w3.org के अनुसार लिंक में src होना मान्य नहीं है, इसलिए यह एक त्वरित हॉटफ़िक्स के रूप में अच्छा है, लेकिन जैसे ही आपके पास थोड़ा और समय होगा मैं एक और खोज करने का सुझाव दूंगा वैध वर्कअराउंड।

— सेबस्टियन वोरैक

Answer 8

आपकी फ़ाइल की टिप्पणियाँ इस पर जाएँगी। कुछ मंत्री टिप्पणी नहीं करेंगे।

भी

यदि आप Node.js का उपयोग करते हैं और अपनी स्थिर फ़ाइलों का उपयोग करते हैं expressजैसे:

app.use(express.static(__dirname + '/public'));

आपको फ़ाइलों को ठीक से संबोधित करने की आवश्यकता है।

मेरे मामले में दोनों ही समस्या थी, इसलिए मैंने अपने CSS लिंक को "/css/styles.css" के साथ जोड़ दिया।

उदाहरण:

<link type="text/css" rel="stylesheet" href='/css/styles.css">

यह समाधान सही है क्योंकि पथ सीएसएस के लिए मुख्य मुद्दा प्रदान नहीं कर रहा है

Answer 9

मैं बस में सीएसएस फ़ाइल (मेरे मामले में एक कोणीय विषय) संदर्भित शैलियों angular.json में मेरे कोणीय 6 निर्माण विन्यास की धारा:

यह प्रश्न का उत्तर नहीं देता है, लेकिन यह मेरे लिए उपयुक्त समाधान हो सकता है।

Comments

कोणीय-CLI 6 परियोजनाओं के लिए सही जवाब यही

— टॉरस्टेन बार्थेल

Answer 10

जैसा कि इस पोस्ट में वर्णित समाधानों में से कुछ समाधानों ने मेरे लिए काम किया है, लेकिन पृष्ठ पर CSS लागू नहीं होता है।

बस, मैंने बस "सीएसएस" निर्देशिका को "एसेस्ट /" निर्देशिका में स्थानांतरित कर दिया और सब कुछ ठीक काम करता है।

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

Comments

विस्मयकारी (वाई) ने मेरी समस्या तय की

— चक्रि

Answer 11

इसके अलावा अन्य के लिए वेबुलर पर सब-फोल्डर का उपयोग करने के लिए कोणीय-सीएलआई और प्रकाशन का उपयोग करते हुए, इस उत्तर को देखें:

जब आप एक डोमेन के भीतर एक गैर-रूट पथ पर तैनात कर रहे हैं, तो आपको मैन्युअल रूप से अपडेट करने की आवश्यकता होगी <base href="https://stackoverflow.com/"> टैग को अपने में होगाdist/index.html.

इस स्थिति में, आपको अपडेट करना होगा <base href="https://stackoverflow.com/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

Answer 12

मुझे यह समस्या उस साइट से थी जिसे मैं जानता था कि मैंने ऑनलाइन काम किया था जब मैंने इसे लोकलहोस्ट और PhPStorm में स्थानांतरित किया।

यह ऑनलाइन काम किया:

    <link rel="stylesheet" href="/css/additional.css">

लेकिन लोकलहोस्ट के लिए मुझे स्लैश से छुटकारा पाने की आवश्यकता थी:

    <link rel="stylesheet" href="css/additional.css">

इसलिए मैं पहले से ही यहां दिए गए कुछ उत्तरों को मजबूत कर रहा हूं - यह किसी भी जटिल सर्वर सेटअप समस्या के बजाय एक पथ या वर्तनी की गलती होने की संभावना है। कंसोल में त्रुटि एक लाल हेरिंग है; नेटवर्क टैब को पहले 404 के लिए जाँचना होगा।

यहां दिए गए जवाबों के बीच कुछ समाधान हैं जो सही नहीं हैं। के अलावा type="text/html"या बदलने के hrefलिए srcइस सवाल का जवाब नहीं है।

यदि आप सभी विशेषताओं को प्राप्त करना चाहते हैं, तो यह सत्यापनकर्ताओं और आपके IDE की पसंद पर मान्य है तो मीडिया मूल्य प्रदान किया relजाना चाहिए और होना चाहिए stylesheet, जैसे:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

Answer 13

मेरी समस्या यह है कि मैं वेबपैक का उपयोग कर रहा था और मेरे HTML सीएसएस लिंक में मेरे पास एक रिश्तेदार पथ था, और कभी भी मैं एक नेस्टेड पृष्ठ पर नेविगेट करूंगा, जो गलत रास्ते पर हल होगा:

<link rel="stylesheet" href='./index.css'>

इसलिए सरल उपाय यह था कि .खदान को हटा दिया जाए, क्योंकि यह एकल-पृष्ठ अनुप्रयोग है ।

ऐशे ही:

<link rel="stylesheet" href='/index.css'>

इसलिए यह हमेशा हल करता है /index.css

Comments

हां, मेरे मामले में, मैं अपनी index.html फ़ाइल से इन सापेक्ष पथों को निकालना भूल गया और उत्पादन मोड में वेबपैक चला रहा था। इन रास्तों की जरूरत नहीं है क्योंकि वेबपैक webss.prod.js के माध्यम से गतिशील रूप से सीएसएस फाइलों को जोड़ता है।

— केवल शाह

Answer 14

मुझे पता है कि यह संदर्भ से बाहर हो सकता है लेकिन गैर-मौजूद फ़ाइल को लिंक करने से यह समस्या हो सकती है क्योंकि यह मेरे साथ पहले भी हुआ था।

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

यदि यह फ़ाइल मौजूद नहीं है, तो आप उस समस्या का सामना करेंगे।

Answer 15

मेरी भी यही समस्या थी।

यदि आपकी परियोजना की संरचना निम्नलिखित पेड़ की तरह है:

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

मैं निम्नलिखित कोड को निम्नलिखित में जोड़ने की सलाह देता हूं server.js:

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

नोट: पथ एक अंतर्निहित Node.js मॉड्यूल है, इसलिए इसे इस पैकेज को npm के माध्यम से स्थापित करने की आवश्यकता नहीं है।

Answer 16

उत्तरों की एक लंबी सूची में जोड़ते हुए, यह मुद्दा मेरे साथ भी हुआ क्योंकि मुझे नहीं पता था कि ब्राउज़र-सिंक दृष्टिकोण से पथ गलत था।

इस सरल फ़ोल्डर संरचना को देखते हुए:

package.json
app
  |-index.html
  |-styles
      |-style.css

hrefविशेषता के अंदर <link>में index.htmlहो गया है app/styles/style.cssऔर नहींstyles/style.css

Comments

दरअसल, रास्ते में बस एक टाइपो ने मुझे यही त्रुटि दी।

— जुलैसेजर

वाह यह मेरे लिए काम किया, बहुत बहुत धन्यवाद। मैं शाब्दिक रूप से हार

— मानने वाला

Answer 17

आप Google Chrome टूल खोल सकते हैं, नेटवर्क टैब का चयन कर सकते हैं, अपने पृष्ठ को फिर से लोड कर सकते हैं और CSS का फ़ाइल अनुरोध पा सकते हैं और यह देख सकते हैं कि फ़ाइल के अंदर क्या है।

हो सकता है कि आपने कुछ गलत किया हो जब आपने अपनी फ़ाइल में दो लाइब्रेरी को मर्ज किया था, जिसमें कुछ अक्षर या हेडर ठीक से CSS के लिए नहीं थे?

Comments

दुर्भाग्य से मैंने यह कोशिश की, लेकिन यह वास्तव में मदद नहीं कर रहा है, अनुरोध तुरंत विफल हो जाता है और इसमें केवल आग्रह है (जो सही है)

— निक

Answer 18

यदि आप कोई JS के साथ एक्सप्रेस के साथ एक्सप्रेस का उपयोग कर रहे हैं:

app.use(express.static('public'));

एक उदाहरण के रूप में, मेरी सीएसएस फ़ाइल है public/stylesheets/app.css

Answer 19

Node.js एप्लिकेशन के लिए, बस अपनी सर्वर फ़ाइल में सभी आवश्यक मॉड्यूल आयात करने के बाद इसका उपयोग करें:

app.use(express.static("."));

• एक्सप्रेस.स्टैटिक बिल्ट-इन मिडलवेयर फंक्शन एक्सप्रेस में और यह आपकी .html फाइल में: <link rel="stylesheet" href="style.css">

Comments

क्या आप वास्तव में जनता के लिए सर्वर कोड की सेवा नहीं करना चाहते हैं?

— Ki Jéy

Answer 20

मुझे वही मुद्दा मिला और फिर मैंने जाँच की कि मैंने लिखा है:

<base href="./"> index.html में

फिर मैं बदल गया

<base href="/">

और फिर यह ठीक काम किया।

Answer 21

निकालें = "स्टाइलशीट" को जोड़ें और टाइप करें = "टेक्स्ट / html"। तो यह इस तरह दिखेगा -

<link  href="styles.css" type="text/html" />

Comments

अंत में एक जवाब जो मेरे लिए काम आया। धन्यवाद!

— रिचर्ड विदरस्पून

Answer 22

मेरे मामले में, जब मैं पैकेज को लाइव परिनियोजित कर रहा था, तो मैंने इसे सार्वजनिक HTML फ़ोल्डर से बाहर कर दिया था। यह एक कारण के लिए था।

लेकिन जाहिरा तौर पर एक सख्त MIME प्रकार की जांच सक्रिय हो गई है, और मुझे यकीन नहीं है कि यह मेरी तरफ है या जिस कंपनी के साथ मैं होस्ट कर रहा हूं।

लेकिन जैसे ही मैंने स्टाइल फ़ोल्डर को उसी निर्देशिका में स्थानांतरित किया, जैसे कि index.php फ़ाइल में मुझे त्रुटि मिलना बंद हो गई, और स्टाइल पूरी तरह से सक्रिय हो गया।

Answer 23

बूटस्ट्रैप शैलियाँ # 3411 लोड नहीं कर रही हैं

https://github.com/angular/angular-cli/issues/3411

1. मैंने बूटस्ट्रैप v। 3.3.7 स्थापित किया

   npm install bootstrap --save

2. फिर मैंने apps[0].scriptsकोणीय-cli.json फ़ाइल में आवश्यक स्क्रिप्ट फ़ाइलों को जोड़ा :

   "scripts": [
       "../node_modules/bootstrap/dist/js/bootstrap.js"
   ],
   
   // And the Bootstrap CSS to the apps[0].styles array
   
   "styles": [
       "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.css"
   ],

3. मैंने एनजी सेवा फिर से शुरू की

इसने मेरे लिए काम किया।

Answer 24

यदि ब्राउज़र संबंधित सीएसएस फ़ाइल नहीं खोज सकता है, तो यह त्रुटि दे सकता है।

यदि आप कोणीय अनुप्रयोग का उपयोग करते हैं तो आपको index.html पर css फ़ाइल पथ नहीं डालना होगा

 <link href="xxx.css" rel="stylesheet"> -->

आप संबंधित सीएसएस फ़ाइल पथ को style.css फ़ाइल पर रख सकते हैं।

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Comments

यह मेरे लिए फिक्स था, index.html से लिंक href हटाएं और स्टाइल में आयात विधि का उपयोग किया। scss।

— आयरनवर्क्स शॉप

Answer 25

समस्या के मुख्य कारणों में से एक CSS फ़ाइल है जो लोड करने की कोशिश कर रहा है एक वैध CSS फ़ाइल नहीं है।

कारण:

• अमान्य MIME प्रकार
• स्टाइल शीट के अंदर जावास्क्रिप्ट कोड होना - (गलत वेबपैक बंडलर कॉन्फ़िगरेशन के कारण हो सकता है)

उस फ़ाइल की जाँच करें जिसे आप लोड करने का प्रयास कर रहे हैं, एक वैध सीएसएस स्टाइल शीट है (नेटवर्क टैब से फ़ाइल का सर्वर URL प्राप्त करें और एक नया टैब और सत्यापित करें)।

शरीर टैग के अंदर <लिंक> का उपयोग करते समय विचार के लिए उपयोगी जानकारी।

हालांकि linkशरीर के अंदर एक टैग होना टैग का उपयोग करने का मानक तरीका नहीं है। लेकिन हम इसका उपयोग पृष्ठ अनुकूलन (अधिक जानकारी: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) के लिए कर सकते हैं ) के / यदि व्यावसायिक उपयोग के मामले में मांग की जाती है (जब आप सामग्री और सर्वर के शरीर को कॉन्फ़िगर करते हैं) HTML पृष्ठ को प्रदान की गई सामग्री के साथ प्रस्तुत करना होगा)।

शरीर टैग के अंदर रखने के जब तक हम विशेषता जोड़ने के लिए itemPropertyमें linkतरह टैग

<body>
    <!-- … -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!-- … -->
</body>`

अधिक जानकारी के लिए /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-documentitemProperty पर एक नज़र डालें ।

Answer 26

मेरे ब्राउज़र में जाकर कंसोल> नेटवर्क> style.css ... पर क्लिक किया और यह दिखाया कि "नहीं मिल सकता है / पथ / से / मेरे / CSS", यह मुझे बताया कि मेरा लिंक गलत था। मैंने अपनी सीएसएस फ़ाइल के पथ में परिवर्तन किया।

परिवर्तन से पहले मूल मार्ग लोकलहोस्ट था: 3000 / उदाहरण / सार्वजनिक / शैली। इसे बदलकर स्थानीयहोस्ट करने के लिए: 3000 / शैली.कैंस ने इसे हल किया।

यदि आप app.use (express.static (path.join (__ dirname, "public")) से फाइल परोस रहे हैं; या app.use (express.static ("सार्वजनिक")); आपका सर्वर ब्राउज़र में "उस फ़ोल्डर" को पारित कर देगा, इसलिए आपके ब्राउज़र में "/yourCssName.css" लिंक जोड़कर उसे सॉल्व कर देगा।

अपने ब्राउज़र सीएसएस लिंक में अन्य मार्गों को जोड़कर, आप ब्राउज़र को निर्दिष्ट मार्ग में सीएसएस की खोज करने के लिए कहेंगे।

सारांश में ... जाँच करें कि आपका ब्राउज़र CSS लिंक कहाँ इंगित करता है।

Answer 27

यदि आप जावास्क्रिप्ट को स्टाइल्स के रूप में सेट कर रहे हैं:

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

फिर बस cssLint.type (उपरोक्त विवरण में तीर द्वारा चिह्नित) "MIME" में बदलें:

   cssLink.type = "MIME";

यह आपको त्रुटि से छुटकारा पाने में मदद करेगा।

Answer 28

यह समस्या तब होती है जब आप किसी भी प्रतिक्रिया या कोणीय के लिए cli टूल का उपयोग कर रहे होते हैं, इसलिए कुंजी उन टूल से संपूर्ण अंतिम बिल्ड की प्रतिलिपि बनाने के लिए है क्योंकि वे इनिशियलाइज़ करते हैं कि वे स्वयं के लाइट सर्वर हैं जो आपके URL को बैक एंड सर्वर के साथ भ्रमित करते हैं जिसे आपने बनाया है ... उस पूरे बिल्ड फोल्डर को लें और उसे अपने बैक एंड सर्वर प्रोजेक्ट के एसेट फोल्डर पर डंप करें और उन्हें अपने बैक एंड सर्वर से रिफ़र करें न कि सर्वर जो एंगुलर या रिएक्टज के साथ शिप करते हैं अन्यथा आप इसे एक निश्चित से फ्रंट एंड के रूप में उपयोग कर रहे हैं एपीआई सर्वर

Answer 29

मुझे इस समस्या का सामना करना पड़ा और कस्टम लुक और एज़्योर बी 2 सी उपयोगकर्ता प्रवाह को जोड़ने में भी यही समस्या थी। मैंने जो पाया वह यह था कि html पेज को रूट ने जो रूट किया था ../oauth/v2 (यानी oauth सर्वर पथ) मेरे भंडारण बॉब के पथ के बजाय।

पन्नों के पूर्ण यूआरएल में डाल मेरे लिए समस्या तय की।

Answer 30

जांचें कि क्या आपके पास कोई कंप्रेशन सक्षम या अक्षम है। यदि आप इसका उपयोग करते हैं या किसी ने इसे सक्षम किया हैapp.use(express.static(xxx)) मदद नहीं करेगा। सुनिश्चित करें कि आपका सर्वर संपीड़न के लिए अनुमति देता है।

जब मैंने अपने वेबपैक में ब्रॉटलि और कम्प्रेशन प्लगइन्स को जोड़ा तो मुझे भी ऐसी ही त्रुटि दिखाई देने लगी। फिर आपके सर्वर को इस प्रकार की सामग्री संपीड़न का भी समर्थन करने की आवश्यकता है।

यदि आप एक्सप्रेस का उपयोग कर रहे हैं तो निम्नलिखित को मदद करनी चाहिए:

app.use(url, expressStaticGzip(dir, gzipOptions)

मॉड्यूल कहा जाता है: एक्सप्रेस-स्टेटिक-गज़िप

मेरी सेटिंग्स हैं:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}