Biểu định kiểu không được tải vì loại MIME

Tôi đang làm việc trên một trang web sử dụng gulpđể biên dịch và đồng bộ hóa trình duyệt để giữ cho trình duyệt được đồng bộ hóa với các thay đổi của tôi.

Tác vụ gulp biên dịch mọi thứ chính xác, nhưng trên trang web, tôi không thể thấy bất kỳ kiểu nào và bảng điều khiển hiển thị thông báo lỗi này:

Từ chối áp dụng kiểu từ ' http: // localhost: 3000 / nội dung / kiểu / tùy chỉnh-style.css ' vì loại MIME của nó ('text / html') không phải là loại MIME của biểu định kiểu được hỗ trợ và kiểm tra MIME nghiêm ngặt được bật.

Bây giờ, tôi không thực sự hiểu tại sao điều này xảy ra.

HTML bao gồm các tệp như thế này (mà tôi khá chắc chắn là chính xác):

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

Và biểu định kiểu là sự hợp nhất giữa các kiểu Bootstrap & font-awesome bây giờ (chưa có gì tùy chỉnh).

Đường dẫn cũng đúng, vì đây là cấu trúc thư mục:

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

Nhưng tôi cứ nhận lỗi.

Nó có thể là gì? Đây có phải là một cái gì đó (có thể là một cài đặt?) Cho gulp / browserync không?

Đối với các ứng dụng Node.js, hãy kiểm tra cấu hình của bạn:

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

Lưu ý rằng /publiccuối cùng không có dấu gạch chéo về phía trước, vì vậy bạn sẽ cần đưa nó vào tùy chọn href của HTML:

href="/css/style.css">

Nếu bạn đã bao gồm một dấu gạch chéo ( /public/) thì bạn có thể làm href="css/style.css".

Vấn đề, tôi nghĩ, là với một thư viện CSS bắt đầu bằng các bình luận.

Trong khi phát triển, tôi không thu nhỏ các tệp và tôi không xóa nhận xét. Điều này có nghĩa là biểu định kiểu bắt đầu với một số nhận xét, khiến nó được xem là một cái gì đó khác với CSS.

Xóa thư viện và đưa nó vào một tập tin nhà cung cấp (LUÔN LUÔN rút gọn mà không có ý kiến) đã giải quyết vấn đề.

Một lần nữa, tôi không chắc chắn 100% đây là bản sửa lỗi, nhưng nó vẫn là một chiến thắng đối với tôi vì nó hoạt động như mong đợi.

Lỗi này cũng có thể xuất hiện khi bạn không tham khảo đúng tệp CSS của mình.

Ví dụ: nếu thẻ liên kết của bạn là

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

nhưng tệp CSS của bạn được đặt tên style.css(không có giây thứ hai) thì rất có thể bạn sẽ thấy lỗi này.

Trong hầu hết các trường hợp, điều này có thể chỉ đơn giản là đường dẫn tệp CSS bị sai . Vì vậy, máy chủ web trả về status: 404với một số Not Foundtải trọng nội dung làhtml loại.

Trình duyệt đi theo đường dẫn (sai) này từ <link rel="stylesheet" ...>thẻ với ý định áp dụng các kiểu CSS. Nhưng kiểu nội dung trả về mâu thuẫn để nó báo lỗi.

Tạo một thư mục ngay bên dưới / phía trên tệp style.css theo cấu trúc Angular và cung cấp một liên kết như thế nào <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Tôi đã có lỗi này cho một mẫu Bootstrap.

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

Sau đó, tôi xóa rel="stylesheet"liên kết, tức là:

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

Và mọi thứ hoạt động tốt. Hãy thử điều này nếu bạn đang sử dụng các mẫu Bootstrap.

Tôi đã thay đổi 'href' -> 'src'. Vì vậy, từ đây:

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

đến đây:

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

Nó đã làm việc. Tôi không biết tại sao, nhưng nó đã làm được việc.

Bình luận trong tập tin của bạn sẽ đi này. Một số công cụ khai thác sẽ không xóa bình luận.

CŨNG THẾ

Nếu bạn sử dụng Node.js và đặt các tệp tĩnh của mình bằng cách sử dụng, expresschẳng hạn như:

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

Bạn cần giải quyết đúng các tập tin.

Trong trường hợp của tôi, cả hai đều là vấn đề, vì vậy tôi đã thêm tiền tố vào các liên kết CSS của mình bằng "/css/styles.css".

Thí dụ:

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

Giải pháp này là hoàn hảo vì đường dẫn là vấn đề chính khiến CSS không nhận được kết xuất

Tôi chỉ đơn giản tham chiếu tệp CSS (một chủ đề Angular trong trường hợp của tôi) trong phần kiểu trong cấu hình bản dựng Angular 6 của tôi trong angular.json:

Điều này không trả lời câu hỏi, nhưng nó có thể là một cách giải quyết phù hợp, vì nó là dành cho tôi.

Như các giải pháp đã đề cập trong bài đăng này, một số giải pháp đã làm việc cho tôi, nhưng CSS không áp dụng trên trang.

Đơn giản, tôi chỉ cần chuyển thư mục "css" vào thư mục "Assest /" và mọi thứ đều hoạt động tốt.

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

Ngoài ra, đối với những người khác sử dụng Angular-CLI và xuất bản vào thư mục con trên máy chủ web, hãy kiểm tra câu trả lời này:

Khi bạn đang triển khai một đường dẫn không gốc trong một tên miền, bạn sẽ cần cập nhật thủ công <base href="https://stackoverflow.com/">thẻ trongdist/index.html.

Trong trường hợp này, bạn sẽ cần cập nhật lên <base href="https://stackoverflow.com/sub-folder/">

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

Vấn đề của tôi là tôi đang sử dụng gói web và trong liên kết CSS HTML của tôi, tôi có một đường dẫn tương đối và bất cứ khi nào tôi sẽ điều hướng đến một trang lồng nhau, điều đó sẽ giải quyết theo đường dẫn sai:

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

Vì vậy, giải pháp đơn giản là loại bỏ .vì tôi là một ứng dụng một trang .

Như thế này:

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

vì vậy nó luôn luôn quyết tâm /index.css

Tôi gặp vấn đề này với một trang web mà tôi biết đã hoạt động trực tuyến khi tôi chuyển nó sang localhost và PhpStorm.

Điều này làm việc tốt trực tuyến:

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

Nhưng đối với localhost tôi cần thoát khỏi dấu gạch chéo:

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

Vì vậy, tôi đang củng cố một vài câu trả lời được cung cấp ở đây - nó có thể là một lỗi đường dẫn hoặc chính tả hơn là bất kỳ vấn đề thiết lập máy chủ phức tạp nào. Lỗi trong giao diện điều khiển là cá trích đỏ; tab mạng cần được kiểm tra trước 404.

Trong số các câu trả lời được cung cấp ở đây có một vài giải pháp không chính xác. Việc thêm type="text/html"hoặc thay đổi hrefthànhsrc không phải là câu trả lời.

Nếu bạn muốn có tất cả các thuộc tính để nó xác nhận tính hợp lệ của trình xác nhận hợp lệ và IDE của bạn thì giá trị phương tiện sẽ được cung cấp và relnên stylesheet, ví dụ:

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

Tôi biết nó có thể nằm ngoài ngữ cảnh nhưng việc liên kết một tệp không tồn tại có thể gây ra vấn đề này như nó đã xảy ra với tôi trước đây.

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

Nếu tập tin này không tồn tại, bạn sẽ phải đối mặt với vấn đề đó.

Tôi đã có cùng một vấn đề.

Nếu cấu trúc dự án của bạn giống như cây sau:

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

Tôi khuyên bạn nên thêm đoạn mã sau vào server.js:

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

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

Lưu ý: Đường dẫn là mô-đun Node.js tích hợp, do đó không cần cài đặt gói này qua npm.

Thêm vào một danh sách dài các câu trả lời, vấn đề này cũng xảy ra với tôi vì tôi không nhận ra đường dẫn sai từ quan điểm đồng bộ hóa trình duyệt.

Cho cấu trúc thư mục đơn giản này:

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

các hrefbên thuộc tính <link>trong index.htmlcó được app/styles/style.cssvà khôngstyles/style.css

Bạn có thể mở các công cụ Google Chrome, chọn tab mạng, tải lại trang của bạn và tìm yêu cầu tệp của CSS và tìm kiếm những gì nó có trong tệp.

Có lẽ bạn đã làm gì đó sai khi bạn hợp nhất hai thư viện trong tệp của mình, bao gồm một số ký tự hoặc tiêu đề không đúng cho CSS?

Trong trường hợp bạn sử dụng Express không có JS, hãy thử với:

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

Ví dụ, tệp CSS của tôi nằm ở public/stylesheets/app.css

Đối với ứng dụng Node.js, chỉ cần sử dụng ứng dụng này sau khi nhập tất cả các mô-đun cần thiết trong tệp máy chủ của bạn:

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

• Hàm phần mềm trung gian tích hợp express.static trong Express và hàm này trong tệp .html của bạn: <link rel="stylesheet" href="style.css">

Tôi đã có cùng một vấn đề và sau đó tôi kiểm tra rằng tôi đã viết:

<base href="./"> trong index.html

Sau đó tôi đổi thành

<base href="/">

Và sau đó nó hoạt động tốt.

Xóa rel = "bản định kiểu" và thêm type = "text / html". Vì vậy, nó sẽ trông như thế này -

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

Trong trường hợp của tôi, khi tôi đang triển khai gói trực tiếp, tôi đã đưa nó ra khỏi thư mục HTML công khai. Đó là vì một lý do.

Nhưng rõ ràng, một kiểm tra loại MIME nghiêm ngặt đã được kích hoạt và tôi không chắc chắn nếu nó đứng về phía tôi hay bởi công ty tôi đang tổ chức.

Nhưng ngay khi tôi di chuyển thư mục tạo kiểu trong cùng thư mục với tệp index.php, tôi đã ngừng nhận lỗi và kiểu dáng đã được kích hoạt hoàn hảo.

Kiểu bootstrap không tải # 3411

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

1. Tôi đã cài đặt Bootstrap v. 3.3.7

   npm install bootstrap --save

2. Sau đó, tôi đã thêm các tệp script cần thiết vào tệp 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. Tôi khởi động lại phục vụ

Nó làm việc cho tôi.

nếu trình duyệt không thể tìm thấy tệp css liên quan, nó có thể gây ra lỗi này.

Nếu bạn sử dụng ứng dụng Angular, bạn không phải đặt đường dẫn tệp css trên index.html

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

Bạn có thể đặt đường dẫn tệp css có liên quan trên tệp Styles.css.

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

Một trong những lý do chính cho vấn đề này là tệp CSS đang cố tải không phải là tệp CSS hợp lệ.

Nguyên nhân:

• Loại MIME không hợp lệ
• Có mã JavaScript bên trong biểu định kiểu - (có thể xảy ra do cấu hình gói Webpack không chính xác)

Kiểm tra tệp mà bạn đang cố tải là biểu định kiểu CSS hợp lệ (lấy URL máy chủ của tệp từ tab mạng và nhấn vào tab mới và xác minh).

Thông tin hữu ích để xem xét khi sử dụng <link> bên trong thẻ body.

Mặc dù có một linkthẻ bên trong cơ thể không phải là cách tiêu chuẩn để sử dụng thẻ. Nhưng chúng tôi có thể sử dụng nó để tối ưu hóa trang (thông tin thêm: https://developers.google.com/speed/docs/insights/OptizesCSSDelivery ) / nếu doanh nghiệp sử dụng nhu cầu (khi bạn phục vụ nội dung của máy chủ và nội dung được định cấu hình phải kết xuất trang HTML với nội dung được cung cấp).

Trong khi giữ bên trong thẻ body, chúng ta phải thêm thuộc tính itemPropertyvào linkthẻ như

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

Để biết thêm thông tin về itemPropertyhãy xem /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

bằng cách vào bảng điều khiển trình duyệt của tôi> mạng> style.css ... đã nhấp vào nó và nó hiển thị "không thể get / path / to / my / CSS", điều này cho tôi biết liên kết của tôi đã sai. tôi đã thay đổi điều đó thành đường dẫn của tệp CSS của tôi.

Đường dẫn ban đầu trước khi thay đổi là localhost: 3000 / Ví dụ / public / style.css thay đổi nó thành localhost: 3000 / style.css đã giải quyết nó.

nếu bạn đang phục vụ tệp từ app.use (express.static (path.join (__ dirname, "công khai"))); hoặc app.use (express.static ("công khai")); máy chủ của bạn sẽ chuyển "thư mục đó" cho trình duyệt để thêm liên kết "/yourCssName.css" trong trình duyệt của bạn sẽ giải quyết nó

Bằng cách thêm các tuyến khác trong liên kết CSS trình duyệt của bạn, bạn sẽ yêu cầu trình duyệt tìm kiếm css trong tuyến đường được chỉ định.

tóm lại ... kiểm tra nơi liên kết CSS trình duyệt của bạn trỏ đến.

Nếu bạn đang đặt Kiểu trong JavaScript là:

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

Sau đó, chỉ cần thay đổi cssLint.type (được biểu thị bằng mũi tên trong mô tả ở trên) thành "MIME":

   cssLink.type = "MIME";

Nó sẽ giúp bạn thoát khỏi lỗi.

Sự cố này xảy ra khi bạn đang sử dụng công cụ cli cho Reacjs hoặc angular, vì vậy, điều quan trọng là sao chép toàn bộ bản dựng cuối cùng từ các công cụ đó vì chúng khởi tạo chúng là các máy chủ lite gây nhầm lẫn URL của bạn với máy chủ back end mà bạn đã tạo ... lấy toàn bộ thư mục bản dựng đó và đổ nó vào thư mục tài sản của dự án máy chủ đầu cuối của bạn và giới thiệu chúng từ máy chủ đầu cuối của bạn chứ không phải máy chủ vận chuyển với Angular hoặc Reactjs Nếu không, bạn đang sử dụng nó làm giao diện người dùng Máy chủ API

Tôi đã gặp vấn đề này có cùng một vấn đề khi thêm giao diện tùy chỉnh vào luồng người dùng Azure B2C. Những gì tôi tìm thấy là gốc mà trang html được đề cập đến là ../oauth/v2 (tức là đường dẫn máy chủ oauth) chứ không phải là đường dẫn đến bob lưu trữ của tôi.

Đưa vào url đầy đủ của các trang đã khắc phục sự cố cho tôi.

Kiểm tra xem bạn có bật hoặc tắt tính năng nén không. Nếu bạn sử dụng nó hoặc ai đó kích hoạt nó thì app.use(express.static(xxx))sẽ không có ích. Hãy chắc chắn rằng máy chủ của bạn cho phép nén.

Tôi bắt đầu thấy lỗi tương tự khi tôi thêm Brotli và Nén Plugins vào Webpack của mình. Sau đó, máy chủ của bạn cũng cần hỗ trợ kiểu nén nội dung này.

Nếu bạn đang sử dụng Express thì những điều sau đây sẽ giúp:

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

Mô-đun được gọi là: express-static-gzip

Cài đặt của tôi là:

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