ไม่ได้โหลดสไตล์ชีทเนื่องจากประเภท MIME

ฉันกำลังทำงานบนเว็บไซต์ที่ใช้gulpในการคอมไพล์และเบราว์เซอร์ซิงค์เพื่อให้เบราว์เซอร์ซิงค์กับการเปลี่ยนแปลงของฉัน

งานอึกรวบรวมทุกอย่างถูกต้อง แต่บนเว็บไซต์ฉันไม่เห็นสไตล์ใด ๆ และคอนโซลแสดงข้อความแสดงข้อผิดพลาดนี้:

ปฏิเสธที่จะใช้สไตล์จาก ' http: // localhost: 3000 / asset / styles / custom-style.css ' เนื่องจากประเภท MIME ('text / 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ไม่มีเครื่องหมายสแลชในตอนท้ายดังนั้นคุณจะต้องรวมไว้ในตัวเลือก href ของ HTML:

href="/css/style.css">

หากคุณไม่ ได้แก่ ทับ ( /public/) href="css/style.css"แล้วคุณก็สามารถทำได้

ฉันคิดว่าปัญหาเป็นกับห้องสมุด CSS เริ่มต้นด้วยความคิดเห็น

ขณะที่กำลังพัฒนาฉันไม่ย่อขนาดไฟล์และไม่ลบความคิดเห็น นี่หมายความว่าสไตล์ชีทเริ่มต้นด้วยความคิดเห็นทำให้มันถูกมองว่าเป็นสิ่งที่แตกต่างจาก CSS

การลบไลบรารีและวางลงในไฟล์ผู้ขาย (ซึ่งถูกย่อให้เล็กสุดโดยไม่มีข้อคิดเห็น) แก้ไขปัญหาได้

อีกครั้งฉันไม่แน่ใจ 100% ว่านี่เป็นการแก้ไข แต่มันก็ยังชนะสำหรับฉันตามที่คาดไว้ตอนนี้

ข้อผิดพลาดนี้อาจเกิดขึ้นเมื่อคุณไม่ได้อ้างถึงไฟล์ CSS ของคุณอย่างถูกต้อง

ตัวอย่างเช่นหากลิงค์แท็กของคุณคือ

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

แต่ไฟล์ CSS ของคุณชื่อstyle.css(โดยไม่มีวินาที) มีโอกาสที่คุณจะเห็นข้อผิดพลาดนี้

ในกรณีส่วนใหญ่นี้อาจจะเป็นเพียงเส้นทางของไฟล์ CSS เป็นสิ่งที่ผิด ดังนั้นเว็บเซิร์ฟเวอร์กลับมาstatus: 404พร้อมกับเพย์Not Foundโหลดเนื้อหาบางhtmlประเภท

เบราว์เซอร์ทำตามเส้นทางนี้ (ผิด) จาก <link rel="stylesheet" ...>แท็กด้วยความตั้งใจที่จะใช้สไตล์ CSS แต่ชนิดเนื้อหาที่ส่งคืนจะขัดแย้งกับการบันทึกข้อผิดพลาด

สร้างโฟลเดอร์เพียงด้านล่าง / ด้านบนไฟล์ style.css <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">ตามโครงสร้างเชิงมุมและให้การเชื่อมโยงเช่น

ฉันมีข้อผิดพลาดนี้สำหรับเทมเพลต Bootstrap

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

จากนั้นฉันก็ลบออกrel="stylesheet"จากลิงค์คือ:

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

และทุกอย่างทำงานได้ดี ลองทำเช่นนี้หากคุณใช้เทมเพลต Bootstrap

ฉันเปลี่ยน 'href' -> 'src' แล้ว ดังนั้นจากนี้

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

สำหรับสิ่งนี้:

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

มันได้ผล ฉันไม่รู้ว่าทำไม แต่ทำงานได้

ความคิดเห็นในไฟล์ของคุณจะนำไปสู่สิ่งนี้ ตัวย่อบางตัวจะไม่ลบความคิดเห็น

นอกจากนี้

หากคุณใช้Node.jsและตั้งค่าสแตติกไฟล์ของคุณโดยใช้expressเช่น:

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

คุณต้องระบุที่อยู่ไฟล์อย่างถูกต้อง

ในกรณีของฉันทั้งคู่เป็นปัญหาฉันจึงนำหน้าลิงก์ CSS ของฉันด้วย "/css/styles.css"

ตัวอย่าง:

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

โซลูชันนี้สมบูรณ์แบบเนื่องจากพา ธ เป็นปัญหาหลักสำหรับ CSS ที่ไม่แสดงผล

ฉันอ้างถึงไฟล์ CSS (ธีม Angular ในกรณีของฉัน) ในส่วนสไตล์ของการกำหนดค่า Angular 6 build ของฉันใน angular.json:

นี่ไม่ได้ตอบคำถาม แต่อาจเป็นวิธีแก้ปัญหาที่เหมาะสมเช่นเดียวกับฉัน

ตามที่กล่าวถึงในโพสต์นี้โซลูชันบางตัวใช้งานได้สำหรับฉัน แต่ CSS ใช้ไม่ได้กับหน้าเว็บ

เพียงแค่ฉันย้ายไดเรกทอรี "css" ไปที่ไดเรกทอรี "Assest /" และทุกอย่างทำงานได้ดี

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

สำหรับผู้อื่นที่ใช้ Angular-CLI และเผยแพร่ไปยังโฟลเดอร์ย่อยบนเว็บเซิร์ฟเวอร์ให้ตรวจสอบคำตอบนี้:

เมื่อคุณปรับใช้กับเส้นทางที่ไม่ใช่รูทภายในโดเมนคุณจะต้องอัปเดต<base href="https://stackoverflow.com/">แท็กด้วยตนเองdist/index.html.

ในกรณีนี้คุณจะต้องอัปเดตเป็น <base href="https://stackoverflow.com/sub-folder/">

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

ปัญหาของฉันคือฉันใช้ webpack และในลิงค์ HTML CSS ของฉันฉันมีเส้นทางสัมพัทธ์และทุกครั้งที่ฉันไปยังหน้าเว็บที่ซ้อนกันที่จะแก้ไขเส้นทางที่ไม่ถูกต้อง:

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

ดังนั้นทางออกง่ายๆคือการลบ.เนื่องจากของฉันเป็นแอปพลิเคชันหน้าเดียว

แบบนี้:

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

ดังนั้นจึงแก้ไขได้เสมอ /index.css

ฉันมีปัญหากับเว็บไซต์ที่ฉันรู้ว่าทำงานออนไลน์เมื่อฉันย้ายไปยัง localhost และ PhpStorm

สิ่งนี้ใช้ได้ดีทางออนไลน์:

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

แต่สำหรับ localhost ฉันต้องกำจัดเครื่องหมายทับ:

    <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">

ฉันรู้ว่ามันอาจอยู่นอกบริบท แต่การเชื่อมโยงไฟล์ที่ไม่มีอยู่อาจทำให้เกิดปัญหานี้ตามที่เคยเกิดขึ้นกับฉันมาก่อน

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

หากไฟล์นี้ไม่มีอยู่คุณจะพบปัญหาดังกล่าว

ฉันมีปัญหาเดียวกัน

หากโครงสร้างโครงการของคุณเป็นเหมือนต้นไม้ต่อไปนี้:

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")));

หมายเหตุ: Path เป็นโมดูล Node.js ในตัวดังนั้นจึงไม่จำเป็นต้องติดตั้งแพ็กเกจนี้ทาง npm

เพิ่มในรายการคำตอบที่ยาวปัญหานี้ก็เกิดขึ้นกับฉันเพราะฉันไม่ได้ตระหนักถึงเส้นทางที่ผิดจากมุมมองเบราว์เซอร์ซิงค์

รับโครงสร้างโฟลเดอร์ที่เรียบง่ายนี้:

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

hrefภายในแอตทริบิวต์<link>ในindex.htmlจะต้องมีapp/styles/style.cssและไม่ได้styles/style.css

คุณสามารถเปิดเครื่องมือ Google Chrome เลือกแท็บเครือข่ายโหลดหน้าเว็บของคุณใหม่และค้นหาคำขอไฟล์ของ CSS และค้นหาสิ่งที่มีอยู่ในไฟล์

บางทีคุณอาจทำอะไรผิดพลาดเมื่อคุณรวมสองไลบรารีในไฟล์ของคุณรวมถึงอักขระหรือส่วนหัวบางอย่างที่ไม่ถูกต้องสำหรับ CSS

ในกรณีที่คุณใช้ Express โดยที่ JS ไม่ต้องลอง:

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

ตัวอย่างเช่นไฟล์ CSS ของฉันอยู่ที่ public/stylesheets/app.css

สำหรับแอปพลิเคชัน Node.js ให้ใช้สิ่งนี้หลังจากนำเข้าโมดูลที่จำเป็นทั้งหมดในไฟล์เซิร์ฟเวอร์ของคุณ:

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

• ฟังก์ชันมิดเดิลแวร์ในตัว express.static ใน Express และสิ่งนี้ในไฟล์. html ของคุณ: <link rel="stylesheet" href="style.css">

ฉันได้รับปัญหาเดียวกันและจากนั้นฉันตรวจสอบว่าฉันเขียน:

<base href="./"> ใน index.html

จากนั้นฉันก็เปลี่ยนเป็น

<base href="/">

แล้วมันก็ใช้งานได้ดี

ลบ rel = "stylesheet" และเพิ่ม type = "text / html" ดังนั้นมันจะเป็นแบบนี้ -

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

ในกรณีของฉันเมื่อฉันปรับใช้แพคเกจสดฉันมีมันออกจากโฟลเดอร์ HTML สาธารณะ มันมีเหตุผล

แต่เห็นได้ชัดว่ามีการเปิดใช้งานการตรวจสอบประเภท MIME อย่างเข้มงวดและฉันก็ไม่แน่ใจเหมือนกันว่ามันอยู่ข้างฉันหรือ บริษัท ที่ฉันโฮสต์ด้วย

แต่ทันทีที่ฉันย้ายโฟลเดอร์จัดแต่งทรงผมในไดเรกทอรีเดียวกับไฟล์ index.php ฉันหยุดรับข้อผิดพลาดและจัดแต่งทรงผมก็เปิดใช้งานได้อย่างสมบูรณ์แบบ

รูปแบบ Bootstrap ไม่ได้โหลด # 3411

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

1. ฉันติดตั้ง Bootstrap v. 3.3.7

   npm install bootstrap --save

2. จากนั้นฉันเพิ่มไฟล์สคริปต์ที่จำเป็นลงในไฟล์apps[0].scriptsangular-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. ฉันเริ่มบริการ ng ใหม่

มันใช้งานได้สำหรับฉัน

หากเบราว์เซอร์ไม่พบไฟล์ css ที่เกี่ยวข้องก็อาจทำให้เกิดข้อผิดพลาดนี้

หากคุณใช้แอปพลิเคชันเชิงมุมคุณไม่จำเป็นต้องวางพา ธ ไฟล์ css บน index.html

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

คุณสามารถใส่พา ธ ไฟล์ css ที่เกี่ยวข้องลงในไฟล์ styles.css

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

หนึ่งในเหตุผลหลักสำหรับปัญหานี้คือไฟล์ CSS ที่พยายามโหลดไม่ใช่ไฟล์ CSS ที่ถูกต้อง

สาเหตุ:

• ประเภท MIME ไม่ถูกต้อง
• มีรหัส JavaScript ในสไตล์ชีต - (อาจเกิดขึ้นเนื่องจากการกำหนดค่าตัวรวม Webpack ไม่ถูกต้อง)

ตรวจสอบไฟล์ที่คุณพยายามโหลดเป็นสไตล์ชีท CSS ที่ถูกต้อง (รับ URL เซิร์ฟเวอร์ของไฟล์จากแท็บเครือข่ายและกดที่แท็บใหม่และยืนยัน)

ข้อมูลที่มีประโยชน์สำหรับการพิจารณาเมื่อใช้ <link> ภายในแท็ก body

แม้ว่าการมีlinkแท็กภายในร่างกายไม่ใช่วิธีมาตรฐานในการใช้แท็ก แต่เราสามารถใช้สำหรับการเพิ่มประสิทธิภาพหน้า (ข้อมูลเพิ่มเติม: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / หากธุรกิจใช้กรณีที่ต้องการ (เมื่อคุณแสดงเนื้อหาของเนื้อหาและเซิร์ฟเวอร์ที่กำหนดค่าให้ ต้องแสดงหน้า HTML ที่มีเนื้อหาที่ให้ไว้)

ในขณะที่อยู่ในแท็ก body เราต้องเพิ่มแอตทริบิวต์itemPropertyในlinkแท็กเช่น

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการitemPropertyได้ดูใน/webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document

โดยเข้าไปที่คอนโซลของเบราว์เซอร์> เครือข่าย> style.css ... คลิกที่มันและมันแสดงให้เห็นว่า "ไม่สามารถรับ / path / to / my / CSS" สิ่งนี้บอกฉันว่าลิงก์ของฉันผิด ฉันเปลี่ยนมันเป็นพา ธ ของไฟล์ CSS ของฉัน

เส้นทางเดิมก่อนการเปลี่ยนแปลงคือ localhost: 3000 / ตัวอย่าง / สาธารณะ / style.css เปลี่ยนเป็น localhost: 3000 / style.css แก้ไขมัน

หากคุณให้บริการไฟล์จาก app.use (express.static (path.join (__ dirname, "public"))); หรือ app.use (express.static ("สาธารณะ")); เซิร์ฟเวอร์ของคุณจะผ่าน "โฟลเดอร์นั้น" ไปยังเบราว์เซอร์เพื่อเพิ่มลิงก์ "/ourCssName.css" ในเบราว์เซอร์ของคุณ

โดยการเพิ่มเส้นทางอื่นในลิงก์ CSS ของเบราว์เซอร์คุณจะบอกให้เบราว์เซอร์ค้นหา css ตามเส้นทางที่ระบุ

โดยสรุป ... ตรวจสอบว่าลิงก์ CSS ของเบราว์เซอร์ของคุณชี้ไปที่ใด

หากคุณกำลังตั้งค่าสไตล์ใน JavaScript เป็น:

    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";

มันจะช่วยคุณกำจัดข้อผิดพลาด

ปัญหานี้เกิดขึ้นเมื่อคุณใช้เครื่องมือ cli สำหรับการตอบสนองหรือเชิงมุมดังนั้นกุญแจคือการคัดลอกงานสร้างขั้นสุดท้ายทั้งหมดจากเครื่องมือเหล่านั้นเนื่องจากพวกเขาเริ่มต้นพวกเขาเป็นเซิร์ฟเวอร์ lite ของตัวเองซึ่งทำให้ URL ของคุณสับสน ... นำโฟลเดอร์บิวด์นั้นไปทิ้งไว้ในโฟลเดอร์สินทรัพย์ของโปรเจ็กต์แบ็คเอนด์เซิร์ฟเวอร์ของคุณและอ้างอิงมันจากเซิร์ฟเวอร์เอนด์แบ็กของคุณไม่ใช่เซิร์ฟเวอร์ที่มาพร้อมกับ Angular หรือ Reactjs มิฉะนั้นคุณจะใช้มันเป็น Front End เซิร์ฟเวอร์ API

ฉันเจอปัญหานี้ที่มีปัญหาเดียวกันคือการเพิ่มรูปลักษณ์และความรู้สึกที่กำหนดเองให้กับโฟลว์ผู้ใช้ Azure B2C สิ่งที่ฉันพบคือรูทที่เพจ html อ้างถึงคือ ../oauth/v2 (เช่นเส้นทางเซิร์ฟเวอร์ oauth) แทนที่จะเป็นเส้นทางไปยังที่เก็บข้อมูลบ๊อบของฉัน

การใส่ URL เต็มของหน้าเว็บเพื่อแก้ไขปัญหาสำหรับฉัน

ตรวจสอบว่าคุณมีการเปิดใช้งานการบีบอัดหรือปิดการใช้งาน หากคุณใช้งานหรือมีคนเปิดใช้งานapp.use(express.static(xxx))จะไม่ช่วย ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณอนุญาตให้มีการบีบอัด

ฉันเริ่มเห็นข้อผิดพลาดที่คล้ายกันเมื่อฉันเพิ่ม Brotli และปลั๊กอินการบีบอัดใน Webpack ของฉัน เซิร์ฟเวอร์ของคุณต้องรองรับการบีบอัดเนื้อหาประเภทนี้ด้วย

หากคุณใช้ Express สิ่งต่อไปนี้น่าจะช่วยได้:

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

โมดูลที่เรียกว่า: express-static-gzip

การตั้งค่าของฉันคือ:

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