Таблица стилей не загружена из-за 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"/>

А таблица стилей - это слияние 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(без секунд), тогда есть большая вероятность, что вы увидите эту ошибку.

В большинстве случаев это может быть просто неверный путь к файлу 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 в моем случае) в разделе стилей моей конфигурации сборки 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/issues/1080

Моя проблема заключается в том, что я использовал веб-пакет, и в моей 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")));

Примечание. Path - это встроенный модуль 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 = "stylesheet" и добавьте type = "text / html". Так это будет выглядеть так -

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

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

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

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

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

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

если браузер не может найти связанный 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 внутри таблицы стилей - (может произойти из-за неправильной конфигурации упаковщика 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 .

зайдя в консоль моего браузера> 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 вашего браузера.

Если вы устанавливаете стили в 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 для реагирования или для angular, поэтому ключом является копирование всей окончательной сборки из этих инструментов, поскольку они инициализируют свои собственные облегченные серверы, что путает ваши URL-адреса с созданным вами внутренним сервером. ... возьмите всю эту папку сборки и поместите ее в папку активов вашего проекта внутреннего сервера и отослайте их с вашего внутреннего сервера, а не с сервера, который поставляется с Angular или Reactjs. В противном случае вы используете его в качестве внешнего интерфейса от определенного API-сервер

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

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

Проверьте, включено ли сжатие или нет. Если вы используете его или кто-то включил его, то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']
}