it-swarm.com.ru

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

Я работаю над сайтом, который использует 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"/>

и таблица стилей - это объединение стилей начальной загрузки и удивительных шрифтов (пока ничего особенного).

Путь также правильный, так как это структура папок:

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

Но я продолжаю получать ошибку.

Есть идеи, что это может быть? Это что-то (возможно, настройка?) Для gulp/browsersync, может быть?

Любая помощь очень ценится, и вы можете запросить более подробную информацию, если это необходимо.

Спасибо

166
Nick

Хорошо, я думаю, что нашел решение, и я пишу это здесь на случай, если кто-то поможет.

Проблема, я думаю, была с библиотекой CSS, начинающейся с комментариев . Находясь в dev, я не минимизирую файлы и не удаляю комментарии, это означало, что таблица стилей начиналась с некоторых комментариев, в результате чего она была видна как что-то отличное от css.

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

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

85
Nick

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

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

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

href="/css/style.css">

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

Надеюсь, что помогает, Спасибо

61
JPaulino

make a folder just below/above style.css file согласно угловой структуре и предоставьте ссылку, такую ​​как <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> enter image description here

50
Gopi G.A

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

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

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

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

39
John Deverall

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

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

 enter image description here

22
Tharaka Manawardhana

У меня была эта ошибка для шаблона начальной загрузки.

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

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

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

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

20
Amandeep Saini

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

 enter image description here

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

16
dvlsc

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

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

к этому:

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

3 часа ночи, и это сработало, не знаю, почему сейчас, но оно сделало свою работу.

14
Sebastian Voráč

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

ТАКЖЕ

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

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

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

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

Пример:

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

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

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

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

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

8
simonberry

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

7
Jitendra G2

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

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

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

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

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

5
Jared

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

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

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

<base href="/">

тогда работает нормально

5
VIKAS KOHLI

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

app.use(express.static("."));
  • встроенная функция промежуточного программного обеспечения express.static в Express .__, и это в вашем .html файле: <link rel="stylesheet" href="style.css">
4
Purav Barot

Вы можете открыть инструменты Chrome, выбрать вкладку «Сеть», перезагрузить страницу и найти файл запроса css и посмотреть, что у него внутри файла. Может быть, вы сделали что-то не так, когда объединили две библиотеки в вашем файле, в том числе некоторые символы или заголовки, неправильно для css? 

4
Yunior González Santana

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

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

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

4
Jabulani

Одной из основных причин этой проблемы является то, что CSS-файл, который пытается загрузить, является недопустимым CSS-файлом . causes:- invalid MIME type, having Javascript code inside style sheet- (может произойти из-за неправильной конфигурации упаковщика веб-пакетов) 

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

Useful info для рассмотрения при использовании внутри тега 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 смотрите на: https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document

3
BALA

У меня была такая же проблема. Если структура вашего проекта похожа на следующее дерево, я рекомендую сделать это:

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.

2
Mostafa Ghadimi

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

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

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

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

2
Stig Perez

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

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

lib
    foobar.bundle.js
    foobr.css

И эта ссылка:

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

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

1
pasx

У меня была такая же проблема, и после нескольких часов отладки я обнаружил, что она связана с временными файлами, которые не могут быть записаны . Перейдите в admin> config> File system . Установите правильный временный каталог. Убедитесь, что у вашего сервера есть разрешение на запись в этот каталог.

1
Asit

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

Может быть, немного не связан с ОП, но я попал сюда в поисках ответа

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

решение из этого нить решило мою проблему

Не уверен, поможет ли это кому-нибудь, но если вы используете angular-cli, я исправил это, удалив ссылку css из моего index.html и добавив ее в файл angular-cli.json в разделе "style" ..__ , После перезапуска моего веб-сервера у меня больше не было этой проблемы.

1
newbie

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

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

Я встретил эту проблему. - Отказался от применения стиля из ' 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. Изменение пути может решить эту проблему.

1
ZILONG PAN

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

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

0
ndoty

Я попытался перезагрузить компьютер с Windows и переустановил «npm i».

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

0
verma

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

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

0
HSN KH

Может быть, у вас есть вопрос авторизации Приятель:

Попробуйте эти шаги:

  1. Перейдите на ISS -> найдите свой проект в списке -> нажмите на него -> нажмите на Редактировать разрешения в правой панели под действиями
  2. вы увидите мастер свойств вашего проекта. Нажмите на Ценные бумаги
  3. Под группами или именами пользователей -> Если вы видите "Аутентифицированные пользователи", то вы авторизуетесь, если нет, то вы должны это сделать.
  4. Как только вы добавите его (самостоятельно или с помощью администратора, если вы работаете в компании :)), веб-сайт начнет загружать ресурсы. Возможно, вам придется перезапустить ваш проект под ISS.

Спасибо

0
Rakesh

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

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

0
Magnus