Таблица стилей не загружена из-за MIME-типа

384

Я работаю над сайтом, который используется gulpдля компиляции и синхронизации браузера, чтобы синхронизировать браузер с моими изменениями.

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

Отказался от применения стиля из ' http: // localhost: 3000 / assets / 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, может быть?

Ник
источник
Я получил это, когда моя связанная таблица стилей началась с тега html <style ... вместо того, чтобы просто переходить к правилам стиля. Я также получил это при линковке в загруженный позже HTML-файл (AngularJS), поэтому я переключился на динамическую загрузку при загрузке страницы через JavaScript, и проблема ушла.
Newclique
82
Это происходит, когда вы устанавливаете неправильный URL-адрес файла или когда ваш сервер не настроен должным образом. В результате браузер НЕ получает таблицу стилей, но получает HTML-код со статусом 404 и заголовком «Content-Type». Поскольку браузер что-то получает от сервера, он не сообщает, что ответа нет, но сообщает, что MIME-тип файла неверен. Самый быстрый способ проверить это - просто попытаться открыть файл прямо http://localhost:3000/assets/styles/custom-style.cssв новой вкладке.
RussCoder
6
Для меня это был случай, описанный RussCoder. Причиной этого было то, что я использовал Angular и забыл добавить файл css в упаковку стилей в angular.json. Так что это было проигнорировано при сборке приложения.
Яна
1
Я мог бы решить эту проблему с помощью весенних настроек безопасности. Он блокировал доступ к папке ресурсов.
19
2
Плохая proxy.conf.jsonнастройка привела нас к этой странной ошибке, так как пересылка запросов в бэкэнд-API не работала правильно, поэтому ответ об ошибке HTML.
Кцангоп

Ответы:

139

Для приложений Node.js проверьте свою конфигурацию:

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

Обратите внимание, что /publicв конце нет косой черты, поэтому вам нужно будет включить ее в свой href-вариант HTML:

href="/css/style.css">

Если вы включили косую черту ( /public/), то можете просто сделать это href="css/style.css".

JPaulino
источник
href = "/ assets / style.css"> в моем случае проблема решена!
Серхио Гуэрджик
127

Проблема, я думаю, была с библиотекой CSS, начинающейся с комментариев.

В процессе разработки я не минимизирую файлы и не удаляю комментарии. Это означало, что таблица стилей начиналась с некоторых комментариев, в результате чего она воспринималась как нечто отличное от CSS.

Удаление библиотеки и помещение ее в файл вендора (который ВСЕГДА минимизируется без комментариев) решили проблему.

Опять же, я не уверен на 100%, что это исправление, но для меня это все равно победа, так как она работает, как и ожидалось.

Ник
источник
4
Половина исправления, потому что, если вы не хотите помещать все эти CSS в поставщика, что вы должны делать? Минимизировать node_modules каждый раз, когда вы тестируете свое приложение? Doh ... Вы нашли что-то, чтобы просто скомпилировать определенный модуль?
SteamFire
1
В моем процессе компиляции файл вендора создается только при сборке, а затем я просто наблюдаю за изменениями в файлах, над которыми я фактически работаю (что обычно не относится к вендору). Это означает, что первая сборка немного медленнее, но потом я просто компилирую свои файлы без минификации, что не замедляет процесс для меня
Ник
3
Я столкнулся с этой же проблемой и обнаружил, что пытался загрузить минимизированную версию файла, которая присутствовала на сервере, как не минимизированный файл. Итак, я пытался загрузить «custom-style.min.css», когда файл на сервере был «custom-style.css». Как только я изменил свою ссылку, чтобы загрузить правильный ресурс, все работало нормально.
программист Дан
Проблема не ограничивается CSS. Я также получил 404 на файл JS, который был вызван комментарием в первой строке.
черный
80

Эта ошибка также может возникнуть, если вы не обращаетесь к своему файлу CSS должным образом.

Например, если ваш тег ссылки

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

но ваш файл CSS назван style.css(без секунд), тогда есть большая вероятность, что вы увидите эту ошибку.

Джон Деверал
источник
4
Именно то, что случилось со мной. Я попробовал каждый ответ здесь (измените mimetype, удалите комментарии CSS, измените конфигурацию node.js ...). Все, что мне нужно было сделать, это исправить опечатку в имени CSS. Doh!
AJPerez
5
Чтобы добавить к этому ответу, убедитесь, что gulp действительно нашел файл css и отправил его в свой дистрибутив. Всякий раз, когда я получаю эту ошибку, это потому, что я каким-то образом облажал свой путь к файлам css, а он просто не существует в каталоге сборки.
LAdams87
5
Да, то же самое для меня, простая и глупая опечатка. Я думаю, что он делает, что сервер отправляет страницу ответа 404, так что ваш браузер получает эту страницу 404 и сообщает вам, что это не правильный CSS ... это правда.
Тану
62

В большинстве случаев это может быть просто неверный путь к файлу CSS . Таким образом, веб-сервер возвращается status: 404с некоторой Not Foundполезной нагрузкой htmlтипа.

Браузер следует по этому (неправильному) пути из <link rel="stylesheet" ...>тега с целью применения стилей CSS. Но возвращаемый тип содержимого противоречит так, что регистрирует ошибку.

Введите описание изображения здесь

Тарака
источник
Моя проблема заключалась в том, что путь был неверным. Но этот плохой путь был вызван неправильной настройкой базового href для моего углового проекта. Если кто-то еще начал видеть эту ошибку после обновления вашего базового href, это может быть причиной.
Крейко,
1
Спасибо за то, что вы
приложили все
1
Еще один способ устранения неполадок: вставьте URL-адрес, по которому вы получаете эту ошибку, на другую вкладку, если вы не видите CSS, это, вероятно, проблема
BlackICE
Спасибо за подсказку
Джейсон Чжоу
52

Создайте папку чуть ниже / выше файла style.css в соответствии с угловой структурой и предоставьте ссылку вроде <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Введите описание изображения здесь

Гопи Г.А.
источник
23
Почему это работает? В сообщении об ошибке говорится, что «text / html» не является поддерживаемым типом MIME.
Джеймс Бейтсон,
6
В моем случае ошибка ушла, стили CSS, однако, не применяются ..: /
Андру
2
Я потратил немного больше времени на чтение этой проблемы, и изменение типа файла CSS, но что-то еще, может вызвать серьезные проблемы, такие как чтение css сервером в виде html
Ник
В AngularDart корнем для index.html является папка «web», а не основная папка проекта. Таким образом, все файлы CSS должны быть внутри веб-папки. Как это "[проектная папка] \ web [yourcssfileshere]". Поэтому, если вы попытаетесь импортировать файл CSS, расположенный за пределами веб-папки, он не будет найден.
Ваэль
40

У меня была эта ошибка для шаблона Bootstrap.

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

Затем я удалил rel="stylesheet"из ссылки, то есть:

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

И все работает отлично. Попробуйте это, если вы используете шаблоны Bootstrap.

Амандип Сайни
источник
3
Хороший улов. Ошибка исчезла.
Рич
1
Согласно Живому стандарту (4.2.4) , «элемент link должен иметь либо атрибут rel, либо атрибут itemprop, но не оба». Таким образом, удаление relатрибута просто удаляет функциональность включения таблицы стилей.
Artjom B.
это как ни странно сработало для меня.
35

Я изменил мой 'href' -> 'src'. Итак, из этого:

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

к этому:

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

Это сработало. Я не знаю почему, но он сделал свою работу.

Себастьян Ворач
источник
1
Хотя это тоже сработало для меня, это действительный атрибут?
sr9yar
1
@ sr9yar Вы право , что в соответствии с validator.w3.org не действует , чтобы иметь исходники ссылки, так хорошо , как быстро исправление, но как только у вас есть немного больше времени , я хотел бы предложить , чтобы найти другие более действительный обходной путь.
Себастьян Ворач
20

Комментарии в вашем файле сработают. Некоторые минифайеры не будут удалять комментарии.

ТАКЖЕ

Если вы используете Node.js и устанавливаете статические файлы, используя expressтакие как:

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

Вам необходимо правильно обратиться к файлам.

В моем случае проблема была в обоих случаях, поэтому я поставил свои CSS-ссылки с префиксом "/css/styles.css".

Пример:

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

Это решение идеально, так как путь является основной проблемой для CSS, не получающего рендеринг

metal_jacke1
источник
18

Я просто ссылался на файл CSS (тема Angular в моем случае) в разделе стилей моей конфигурации сборки Angular 6 в angular.json:

Введите описание изображения здесь

Это не отвечает на вопрос, но может быть подходящим обходным путем, как это было для меня.

dvlsc
источник
3
Вот правильный ответ для проектов Angular-CLI 6
Торстен Бартел
14

Как уже упоминалось в этом посте, некоторые решения работали для меня, но 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" >
Jitendra G2
источник
Awesome (Y) исправил мою проблему
Чакри
12

Также для других, использующих 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

simonberry
источник
10

Моя проблема заключается в том, что я использовал веб-пакет, и в моей HTML-ссылке CSS у меня был относительный путь, и в любое время я переходил на вложенную страницу, которая приводила бы к неправильному пути:

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

таким простым решением было удалить, .так как мое приложение является одностраничным .

Нравится:

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

так что всегда решает /index.css

Джаред
источник
Да, в моем случае я забыл удалить эти относительные пути из моего файла index.html и запустил веб-пакет в производственном режиме. Эти пути не нужны, поскольку webpack динамически связывает файлы css через webpack.prod.js.
Кевал Шах
10

У меня была эта проблема с сайтом, который, как я знал, работал в Интернете, когда я переместил его на 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">
Кот Генри
источник
10

Я знаю, что это может быть вне контекста, но ссылка на несуществующий файл может вызвать эту проблему, как это случилось со мной раньше.

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

Если этот файл не существует, вы столкнетесь с этой проблемой.

Сафват Фатхи
источник
8

У меня была такая же проблема.

Если структура вашего проекта похожа на следующее дерево:

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.

Мостафа Гадими
источник
7

Добавляя к длинному списку ответов, эта проблема также произошла со мной, потому что я не осознавал, что путь был неправильным с точки зрения синхронизации браузера.

Учитывая эту простую структуру папок:

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

hrefатрибут внутри <link>в index.htmlдолжен быть app/styles/style.cssи неstyles/style.css

Стиг Перес
источник
На самом деле, просто опечатка в пути дала мне ту же ошибку.
Юлезезаар
вау, это сработало для меня, большое спасибо. Я буквально собирался сдаться
Ваш
7

Вы можете открыть инструменты Google Chrome, выбрать вкладку сети, перезагрузить страницу и найти файл запроса CSS и посмотреть, что у него внутри файла.

Может быть, вы сделали что-то не так, когда объединили две библиотеки в вашем файле, включая некоторые символы или заголовки, которые не совсем подходят для CSS?

Юниор Гонсалес Сантана
источник
1
к сожалению, я попробовал это сделать, но это не очень помогает, запрос мгновенно завершается неудачно, и у него есть только URL-адрес запроса (это правильно)
Ник
6

Если вы используете Express без JS, попробуйте:

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

Например, мой файл CSS находится на public/stylesheets/app.css

Таль Хакмон
источник
5

Для приложения Node.js просто используйте это после импорта всех необходимых модулей в файл вашего сервера:

app.use(express.static("."));
  • Express.static встроенная функция промежуточного программного обеспечения в Express, и это в вашем .html файле: <link rel="stylesheet" href="style.css">
Пурав Барот
источник
3
Вы действительно не хотите предоставлять свой серверный код общественности?
Ки Жей
5

Я получил ту же проблему, а затем я проверил, что я написал:

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

Затем я изменился на

<base href="/">

И тогда все работало нормально.

ВИКАС КОЛИ
источник
4

Удалите rel = "stylesheet" и добавьте type = "text / html". Так это будет выглядеть так -

<link  href="styles.css" type="text/html" />
Санджай Чуби
источник
Наконец ответ, который работал для меня. Спасибо!
Ричард Уизерспун
4

В моем случае, когда я развертывал пакет вживую, он находился в общедоступной папке HTML. Это было по причине.

Но, видимо, была активирована строгая проверка типов MIME, и я не слишком уверен, что это на моей стороне или в компании, с которой я хостинг.

Но как только я переместил папку стилей в тот же каталог, что и файл index.php, я перестал получать сообщение об ошибке, и стилизация была активирована идеально.

Jabulani
источник
4

Стили начальной загрузки не загружаются # 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 служить

Это сработало для меня.

HSN KH
источник
4

если браузер не может найти связанный 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";
Ахмет Арслан
источник
Это было исправлением для меня: удалите ссылку href из index.html и использовали метод импорта в styles.scss.
IronWorkshop
3

Одна из основных причин этой проблемы - файл 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 .

БАЛА
источник
3

зайдя в консоль моего браузера> network> 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 ("public")); ваш сервер будет передавать «эту папку» в браузер, поэтому добавление ссылки «/yourCssName.css» в ваш браузер решает ее

Добавляя другие маршруты в CSS-ссылку вашего браузера, вы должны указывать браузеру искать css по указанному маршруту.

в итоге ... проверьте, куда указывает ссылка CSS вашего браузера.

Бахри Норедин
источник
2

Если вы устанавливаете стили в 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";

Это поможет вам избавиться от ошибки.

Ширам
источник
2

Эта проблема возникает, когда вы используете инструмент cli для реагирования или для angular, поэтому ключом является копирование всей окончательной сборки из этих инструментов, поскольку они инициализируют свои собственные облегченные серверы, что путает ваши URL-адреса с созданным вами внутренним сервером. ... возьмите всю эту папку сборки и поместите ее в папку активов вашего проекта внутреннего сервера и отослайте их с вашего внутреннего сервера, а не с сервера, который поставляется с Angular или Reactjs. В противном случае вы используете его в качестве внешнего интерфейса от определенного API-сервер

ndoty
источник
2

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

Размещение полного URL-адреса страниц решило проблему для меня.

Liam
источник
2

Проверьте, включено ли сжатие или нет. Если вы используете его или кто-то включил его, тоapp.use(express.static(xxx)) это не поможет. Убедитесь, что ваш сервер допускает сжатие.

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

Если вы используете Express, то следующее должно помочь:

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

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

Мои настройки:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
Грег Воз
источник