Live-сервер не загружает CSS-файл
У меня есть CSS-файл, связанный с моим HTML-файлом. Мой CSS не работает при загрузке файла HTML через Live-сервер.
CSS работает нормально при открытии HTML-файла непосредственно через браузер. У меня есть мой файл CSS за пределами каталога, где находится файл HTML. При использовании live-server для моего npm-скрипта в качестве запуска npm без каких-либо аргументов, он просто показывает все файлы моей рабочей области, и css работает, если я нажимаю на каталог, где находится мой html-файл. Но если я добавлю html-файл в качестве аргумента для live-сервера, он загрузит только html-файл без каких-либо изменений css.
HTML:
<link rel='stylesheet' type='text/css' href='../styles.css'>
package.json:
"start": "live-server home/index.html"
или же
"start": "live-server home"
или же
"start": "live-server home/index.html && styles.css"
все имеют одинаковые результаты. Только
"start": "live-server"
работает, что показывает рабочий каталог в браузере. Я нажимаю домашний каталог, а затем файл HTML загружается с CSS.
При наборе npm start из терминала мой html-файл нормально загружается в моем браузере, но по какой-то причине связанный css-файл не загружается. Код ссылки CSS должен быть в порядке, так как он работает правильно при открытии прямо из браузера. Должен ли файл css находиться в одном каталоге?
7 ответов
Пожалуйста, проверьте атрибуты тега ссылки и правильно ли указаны их значения. text \ css никогда не загрузит файл css. Правильно - text / css (косая черта). Также попробуйте открыть html-файл из проводника и проверьте, работает ли он.
<link rel="stylesheet" type="text/css" href="style.css" />
Я смог заставить его работать, переустановив расширение живого сервера на vscode. Надеюсь это поможет!
Причину, по которой это происходит, мы можем увидеть из документации по живому серверу:
Сервер - это простое приложение узла, которое обслуживает рабочий каталог и его подкаталоги.
Если вместо каталога указан файл или каталог не содержит ресурсов, которые должны быть загружены live-сервером, это приведет к ошибке 404. Однако в настройках по умолчанию для live-сервера в случае ошибки 404, по умолчанию он будет пытаться прочитать index.html, что вызывает ошибку типа MIME, что он пытается загрузить «text / html» для многих людей, сталкивающихся с этой путаницей.
В общем, при использовании live-сервера попробуйте создать общедоступный или дистрибутивный каталог, в котором вы планируете хранить весь свой статический контент. Вот пример структуры каталогов, которая компилирует машинописный текст в каталог dist / js и sass в каталог dist / css:
.
├── dist
│ ├── css
│ │ └── index.css
│ ├── index.html
│ └── js
│ └── index.js
├── package.json
├── src
│ ├── app.ts
│ ├── index.ts
│ └── sass
│ └── main.scss
└── yarn.lock
Затем вы можете запустить «live-server dist» - ключевым фактором является то, что я не прошу live-server смотреть за пределы каталога, который он обслуживает.
Вот документация по живому серверу для получения дополнительной информации о параметрах конфигурации.
Мне пришлось предоставить live-серверу полный путь к моему CSS:
<link rel="stylesheet" type="text/css" href="http://localhost:8888/login/css/bootstrap.min.css" />
Я не знаю почему, но это исправило это.
примечание: в примере здесь я показываю путь к начальной загрузке, но то же самое относится и к моему пользовательскому файлу css.
У меня была проблема, и я нашел решение из видео на You Tube. Как бы то ни было, проблема не в том, чтобы указывать весь путь css в ссылке. Просто скопируйте имя файла css, например «style.css», и поместите его в свой href... это просто...
В VS Code щелкните правой кнопкой мыши style.css и выберите "скопировать относительный путь" и вставьте его в тег ссылки href="style.css", не пытайтесь создать ссылку, выбрав внешний путь или тип вручную, работал для я тут же, когда пытался найти решение той же проблемы, но не нашел, попробовал только это в качестве последней попытки перед сном!!
Переустановите живой сервер, он заработает, ничего менять не нужно.