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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

href="/css/style.css">

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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

Ответ 7

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

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

к этому:

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

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

Ответ 8

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

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

Ответ 9

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

ТАКЖЕ

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

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

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

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

Пример:

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

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

Ответ 10

Как уже упоминалось в этом посте, некоторые решения помогли мне, но 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" >

Ответ 11

Также для других, использующих Angular-CLI и публикующих в подпапке на веб-сервере, проверьте этот ответ:

При развертывании по некорневому пути в домене вам необходимо вручную обновить <base href="/"> в вашем dist/index.html.

В этом случае вам нужно будет обновить до <base href="/sub-folder/">

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

Ответ 12

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

Ответ 13

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

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

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

Как это:

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

поэтому всегда разрешается в /index.css

Ответ 14

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

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

Ответ 15

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

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

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.

Ответ 16

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

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

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

<base href="/">

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

Ответ 17

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

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

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

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

Ответ 18

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

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

• встроенная промежуточная функция express.static в Express, и это в вашем файле .html: < link rel="stylesheet" href="style.css">

Ответ 19

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

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

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

Ответ 20

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

Причины:

• Неверный тип MIME
• Наличие кода JavaScript внутри таблицы стилей - (может произойти из-за неправильной конфигурации упаковщика Webpack)

Убедитесь, что файл, который вы пытаетесь загрузить, является допустимой таблицей стилей CSS (получите URL-адрес сервера для файла на вкладке сети, нажмите новую вкладку и проверьте).

Полезная информация для рассмотрения при использовании <link> внутри тега body.

Хотя использование тега link внутри тела не является стандартным способом использования тега. Но мы можем использовать его для оптимизации страницы (дополнительная информация: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)/, если этого требует бизнес-сценарий (когда вы обслуживаете тело контента и сервер, настроенный для должны сделать HTML-страницу с предоставленным контентом).

itemProperty внутри тега body, мы должны добавить атрибут itemProperty в тег link например:

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

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

Стили начальной загрузки не загружаются # 3411

https://github.com/angular/angular-cli/issues/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. Я перезапустил нг служить

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

Ответ 24

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

Ответ 25

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

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

В качестве примера мой CSS файл находится на public/stylesheets/app.css

Ответ 26

Тройная проверка имени и пути к файлу. В моем случае у меня было что-то вроде этого содержимого в целевой папке:

lib
    foobar.bundle.js
    foobr.css

И эта ссылка:

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

Я предполагаю, что браузер пытался загрузить файл JavaScript и жаловался на его тип MIME вместо того, чтобы выдавать мне ошибку "файл не найден".

Ответ 27

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

Перейдите в Admin → Конфиг → Файловая система. Установите правильный временный каталог. Убедитесь, что у вашего сервера есть разрешение на запись в этот каталог.

Ответ 28

У меня была эта ошибка, в Angular. Я решил это, поместив ngIf в элемент link, чтобы он не появлялся в DOM, пока не был заполнен мой динамический URL.

Возможно, это немного не связано с ФП, но я остановился на поиске ответа.

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">

Ответ 29

Я встретил эту проблему.

Я отказался применять стиль из " http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 ". потому что его тип MIME ('text/html') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Изменение пути может решить эту проблему.

Ответ 30

У меня была та же проблема, и в моем случае это было связано с тем, что я пытался вручную импортировать файлы CSS в файл HTML (как мы всегда делаем со статическими сайтами), когда на самом деле файлы должны были быть импортированный в точку входа файл JavaScript, используемый Webpack.

Когда таблицы стилей были импортированы в основной файл JavaScript, а не написаны вручную в HTML, все работало как положено.