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




css gulp (20)

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

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

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

    npm install bootstrap --save
  2. फिर मैंने apps[0].scripts को आवश्यक स्क्रिप्ट फ़ाइलें 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. मैंने एनजी सेवा फिर से शुरू की

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

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

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

' http://localhost:3000/assets/styles/custom-style.css ' से स्टाइल लागू करने से इनकार कर दिया क्योंकि इसका 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 के लिए?


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

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

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

href="/css/style.css">

यदि आपने एक फ़ॉरवर्ड स्लैश ( /public/ ) शामिल किया है तो आप बस href="css/style.css"


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

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


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

भी

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

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

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

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

उदाहरण:

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

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


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

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

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

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


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


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

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


ट्रिपल फ़ाइल के नाम और पथ की जाँच करें। मेरे मामले में मेरे पास लक्ष्य फ़ोल्डर में कुछ इस तरह की सामग्री थी:

lib
    foobar.bundle.js
    foobr.css

और यह लिंक:

<link rel="stylesheet" href="lib/foobar.css">

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


मुझे भी यही समस्या थी और डिबगिंग के घंटों के बाद मुझे पता चला कि यह अस्थायी फाइलों से संबंधित है जिसे लिखा नहीं जा सकता है।

व्यवस्थापक कॉन्फ़िगरेशन फ़ाइल सिस्टम पर जाएं । सही अस्थायी निर्देशिका सेट करें। सुनिश्चित करें कि आपके सर्वर को उस निर्देशिका को लिखने की अनुमति है।


मुझे भी यही समस्या थी, और मेरे मामले में यह इस तथ्य के कारण था कि मैंने मैन्युअल रूप से HTML फ़ाइल में सीएसएस फ़ाइलों को आयात करने की कोशिश की थी (जैसे हम हमेशा स्थैतिक वेबसाइटों के साथ करते हैं), जब वास्तव में फ़ाइलों को होना था। वेबपैक द्वारा उपयोग की जाने वाली प्रविष्टि बिंदु जावास्क्रिप्ट फ़ाइल में आयात किया गया।

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


मुझे यह समस्या उस साइट से थी जिसे मैं जानता था कि मैंने ऑनलाइन काम किया था जब मैंने इसे लोकलहोस्ट और 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">

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

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

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

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


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

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

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

मैं 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 के माध्यम से स्थापित करने की आवश्यकता नहीं है।


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

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

इसलिए सरल उपाय था कि इसे हटाया जाए . चूंकि मेरा एक सिंगल-पेज एप्लिकेशन है

ऐशे ही:

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

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


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

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

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


मैं इस मुद्दे से मिला।

मैंने ' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 ' से शैली लागू करने से इनकार कर दिया। क्योंकि इसका MIME प्रकार ('टेक्स्ट / html') एक समर्थित स्टाइलशीट MIME प्रकार नहीं है, और MIME सख्त जाँच सक्षम है।

रास्ता बदलने से इस समस्या का समाधान हो सकता है।


मैंने अपनी विंडोज मशीन को पुनः आरंभ करने की कोशिश की और "npm i" को फिर से स्थापित किया।

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


मैंने केवल अपने कोणीय 6 के विन्यास अनुभाग में CSS फ़ाइल (मेरे मामले में एक कोणीय विषय) को कोणीय में संदर्भित किया है। json:

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


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

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

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

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


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

का कारण बनता है:

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

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

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

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

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

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

itemProperty बारे में अधिक जानकारी के लिए https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document पर एक नज़र है।





browser-sync