Таблиця стилів не завантажується через тип MIME

Я працюю над веб-сайтом, який використовує gulpдля компіляції та синхронізації браузера, щоб підтримувати синхронізацію браузера зі своїми змінами.

Завдання gulp компілює все належним чином, але на веб-сайті я не можу побачити жодного стилю, і на консолі відображається це повідомлення про помилку:

Відмовлено в застосуванні стилю з ' http: // localhost: 3000 / properties / styles / custom-style.css ', оскільки його тип MIME ('text / html') не підтримується MIME-таблицею стилів, і включена сувора перевірка MIME.

Зараз я не дуже розумію, чому це відбувається.

HTML включає такий файл (який я впевнений, правильно):

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

А таблиця стилів - це злиття Bootstrap & font-awesome стилів на даний момент (поки що нічого спеціального).

Шлях також правильний, оскільки це структура папки:

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

Але я продовжую отримувати помилку.

Що це може бути? Це щось (може бути, налаштування?) Для gulp / Browsersync?

Для програм 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(без другого s), то є хороший шанс, що ви побачите цю помилку.

У більшості випадків це може бути просто неправильний шлях файлу 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 6 у 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/isissue/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")));

Примітка: Шлях - це вбудований модуль 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 = "стиль таблиці" та додайте type = "text / html". Так буде виглядати так -

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

У моєму випадку, коли я розгортав пакет у прямому ефірі, я мав його із загальнодоступної папки HTML. Це було чомусь.

Але, мабуть, була активована сувора перевірка типу MIME, і я не надто впевнений, чи є вона на моєму боці чи від компанії, в якій я приймаю участь.

Але як тільки я перемістив папку стилізації в ту саму директорію, що і файл index.php, я перестав отримувати помилку, і стилізація була активована ідеально.

Стилі завантаження не завантажуються # 3411

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

1. Я встановив Bootstrap v. 3.3.7

   npm install bootstrap --save

2. Потім я додав потрібні файли сценаріїв apps[0].scriptsу файл angular-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. Я перезапустив сервіс

Це працювало для мене.

якщо браузер не може знайти пов'язаний файл css, це може призвести до цієї помилки.

Якщо ви використовуєте програму Angular, вам не потрібно ставити шлях до файлу 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 у таблиці стилів - (може виникнути через неправильну конфігурацію постачальника веб-пакетів)

Перевірте, чи файл, який ви намагаєтеся завантажити, є дійсним аркушем стилю 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 ... натиснув на неї, і вона показала "не можу потрапити / шлях / до / мій / CSS", це мені сказало, що моє посилання було неправильним. я змінив це на шлях мого файлу CSS.

Оригінальний шлях до зміни був localhost: 3000 / Example / public / style.css змінивши його на localhost: 3000 / style.css вирішив це.

якщо ви подаєте файл з app.use (express.static (path.join (__ dirname, "public")); або app.use (express.static ("загальнодоступний")); ваш сервер передасть "ту папку" до браузера, тому додавання посилання "/yourCssName.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 для reactjs або angular, тому ключовим є копіювання всієї остаточної збірки з цих інструментів, оскільки вони ініціалізують, що вони є власними послугами Lite, що плутає ваші URL-адреси з створеним вами заднім сервером. ... візьміть цілу папку збірки та скиньте її в папку ресурсів проекту заднього кінця сервера та перекажіть їх на своєму сервері заднього кінця, а не на сервері, який постачається з Angular або Reactjs. Інакше ви використовуєте його як передній з певного API-сервер

У цій проблемі я зіткнувся з тією ж проблемою, що додає користувальницький потік Azure B2C для користувальницького вигляду та відчуття. Я виявив, що корінь, на який згадувалася html-сторінка, був ../oauth/v2 (тобто шлях до сервера oauth), а не шлях до мого файлу зберігання.

Внесення повної URL-адреси сторінок вирішило для мене проблему.

Перевірте, чи увімкнено або вимкнено стиснення. Якщо ви користуєтесь ним або хтось увімкнув це, app.use(express.static(xxx))це не допоможе. Переконайтеся, що ваш сервер дозволяє стиснути.

Я почав бачити подібну помилку, коли додав модулі Brotli та Compression Plugins до свого веб-пакета. Тоді ваш сервер також повинен підтримувати такий тип стиснення вмісту.

Якщо ви використовуєте Express, вам слід допомогти наступне:

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

Модуль називається: express-static-gzip

Мої налаштування:

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