Я работаю над сайтом, который используется 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, может быть?
http://localhost:3000/assets/styles/custom-style.css
в новой вкладке.proxy.conf.json
настройка привела нас к этой странной ошибке, так как пересылка запросов в бэкэнд-API не работала правильно, поэтому ответ об ошибке HTML.Ответы:
Для приложений Node.js проверьте свою конфигурацию:
Обратите внимание, что
/public
в конце нет косой черты, поэтому вам нужно будет включить ее в свой href-вариант HTML:Если вы включили косую черту (
/public/
), то можете просто сделать этоhref="css/style.css"
.источник
Проблема, я думаю, была с библиотекой CSS, начинающейся с комментариев.
В процессе разработки я не минимизирую файлы и не удаляю комментарии. Это означало, что таблица стилей начиналась с некоторых комментариев, в результате чего она воспринималась как нечто отличное от CSS.
Удаление библиотеки и помещение ее в файл вендора (который ВСЕГДА минимизируется без комментариев) решили проблему.
Опять же, я не уверен на 100%, что это исправление, но для меня это все равно победа, так как она работает, как и ожидалось.
источник
Эта ошибка также может возникнуть, если вы не обращаетесь к своему файлу 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.
Затем я удалил
rel="stylesheet"
из ссылки, то есть:И все работает отлично. Попробуйте это, если вы используете шаблоны Bootstrap.
источник
rel
атрибута просто удаляет функциональность включения таблицы стилей.Я изменил мой 'href' -> 'src'. Итак, из этого:
<link rel="stylesheet" href="dist/photoswipe.css">
к этому:
<link rel="stylesheet" src="dist/photoswipe.css">
Это сработало. Я не знаю почему, но он сделал свою работу.
источник
Комментарии в вашем файле сработают. Некоторые минифайеры не будут удалять комментарии.
ТАКЖЕ
Если вы используете Node.js и устанавливаете статические файлы, используя
express
такие как:Вам необходимо правильно обратиться к файлам.
В моем случае проблема была в обоих случаях, поэтому я поставил свои CSS-ссылки с префиксом "/css/styles.css".
Пример:
Это решение идеально, так как путь является основной проблемой для CSS, не получающего рендеринг
источник
Я просто ссылался на файл CSS (тема Angular в моем случае) в разделе стилей моей конфигурации сборки Angular 6 в angular.json:
Это не отвечает на вопрос, но может быть подходящим обходным путем, как это было для меня.
источник
Как уже упоминалось в этом посте, некоторые решения работали для меня, но CSS не применяется на странице.
Просто я просто переместил каталог "css" в каталог "Assest /", и все работает отлично.
источник
Также для других, использующих 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 у меня был относительный путь, и в любое время я переходил на вложенную страницу, которая приводила бы к неправильному пути:
таким простым решением было удалить,
.
так как мое приложение является одностраничным .Нравится:
так что всегда решает
/index.css
источник
У меня была эта проблема с сайтом, который, как я знал, работал в Интернете, когда я переместил его на localhost и PhpStorm.
Это работало нормально онлайн:
Но для localhost мне нужно было избавиться от косой черты:
Итак, я подкрепляю несколько ответов, представленных здесь уже - скорее всего, это будет ошибка пути или орфографии, а не какая-либо сложная проблема с настройкой сервера. Ошибка в консоли - красная сельдь; Сначала нужно проверить вкладку сети на 404.
Среди ответов, приведенных здесь, есть несколько неправильных решений. Добавление
type="text/html"
или изменениеhref
вsrc
это не ответ.Если вы хотите иметь все атрибуты, чтобы они проверялись на самых строгих валидаторах и вашей IDE, то должно быть предоставлено медиа значение, которое
rel
должно бытьstylesheet
, например:источник
Я знаю, что это может быть вне контекста, но ссылка на несуществующий файл может вызвать эту проблему, как это случилось со мной раньше.
Если этот файл не существует, вы столкнетесь с этой проблемой.
источник
У меня была такая же проблема.
Если структура вашего проекта похожа на следующее дерево:
Я рекомендую добавить следующий фрагмент кода в
server.js
:Примечание. Path - это встроенный модуль Node.js, поэтому нет необходимости устанавливать этот пакет через npm.
источник
Добавляя к длинному списку ответов, эта проблема также произошла со мной, потому что я не осознавал, что путь был неправильным с точки зрения синхронизации браузера.
Учитывая эту простую структуру папок:
href
атрибут внутри<link>
вindex.html
должен бытьapp/styles/style.css
и неstyles/style.css
источник
Вы можете открыть инструменты Google Chrome, выбрать вкладку сети, перезагрузить страницу и найти файл запроса CSS и посмотреть, что у него внутри файла.
Может быть, вы сделали что-то не так, когда объединили две библиотеки в вашем файле, включая некоторые символы или заголовки, которые не совсем подходят для CSS?
источник
Если вы используете Express без JS, попробуйте:
Например, мой файл CSS находится на
public/stylesheets/app.css
источник
Для приложения Node.js просто используйте это после импорта всех необходимых модулей в файл вашего сервера:
link rel="stylesheet" href="style.css">
источник
Я получил ту же проблему, а затем я проверил, что я написал:
<base href="./">
в index.htmlЗатем я изменился на
И тогда все работало нормально.
источник
Удалите rel = "stylesheet" и добавьте type = "text / html". Так это будет выглядеть так -
источник
В моем случае, когда я развертывал пакет вживую, он находился в общедоступной папке HTML. Это было по причине.
Но, видимо, была активирована строгая проверка типов MIME, и я не слишком уверен, что это на моей стороне или в компании, с которой я хостинг.
Но как только я переместил папку стилей в тот же каталог, что и файл index.php, я перестал получать сообщение об ошибке, и стилизация была активирована идеально.
источник
Стили начальной загрузки не загружаются # 3411
https://github.com/angular/angular-cli/issues/3411
Я установил Bootstrap v. 3.3.7
Затем я добавил необходимые файлы сценариев в файл
apps[0].scripts
angular-cli.json:Я перезапустил NG служить
Это сработало для меня.
источник
если браузер не может найти связанный css файл, он может выдать эту ошибку.
Если вы используете приложение Angular, вам не нужно указывать путь к файлу css в index.html.
Вы можете поместить соответствующий путь к файлу CSS в файл styles.css.
источник
Одна из основных причин этой проблемы - файл CSS, который пытается загрузить, не является допустимым файлом CSS.
Причины:
Убедитесь, что файл, который вы пытаетесь загрузить, является допустимой таблицей стилей CSS (получите URL-адрес сервера для этого файла на вкладке сети, нажмите новую вкладку и проверьте).
Полезная информация для рассмотрения при использовании <link> внутри тега body.
Хотя наличие
link
тега внутри тела не является стандартным способом использования тега. Но мы можем использовать его для оптимизации страницы (дополнительная информация: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery. ) /, если этого требует бизнес-сценарий (когда вы обслуживаете тело контента и сервер, настроенный для должны сделать HTML-страницу с предоставленным контентом).Сохраняя внутри тега body, мы должны добавить атрибут
itemProperty
вlink
тег:Для получения дополнительной информации
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 как:
Затем просто измените cssLint.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
Мои настройки:
источник