Live-сервер не загружает файл css

У меня есть файл css, связанный с моим html файлом. Мой css не работает при загрузке html-файла через live-сервер.

CSS отлично работает при открытии html-файла напрямую через браузер. У меня есть файл css вне каталога, где находится файл html. При использовании live-сервера для моего скрипта npm в качестве запуска npm без каких-либо аргументов он просто показывает все файлы моей рабочей области, и css работает, если я нажимаю на каталог, где находится мой html-файл. Но если я добавлю html-файл в качестве аргумента для live-сервера, он загрузит только html-файл без каких-либо изменений css.

HTML:

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

пакет.json:

"start": "live-server home/index.html"

or

"start": "live-server home"

or

"start": "live-server home/index.html && styles.css"

у всех одинаковые результаты. Только

"start": "live-server"

работает, который показывает рабочий каталог в браузере. Я щелкаю домашний каталог, а затем загружается html-файл с css.

При вводе npm start из терминала мой html-файл нормально загружается в моем браузере, но по какой-то причине связанный файл css не загружается. Код ссылки css должен быть в порядке, поскольку он работает правильно при открытии непосредственно из браузера. Должен ли файл css находиться в том же каталоге?


npm html css package.json npm-live-server
person VoidChips    schedule 28.06.2019    source источник
comment
Вы должны включить свои стили в файл src/angular.json под объектом стилей.   -  person TheUnKnown    schedule 28.06.2019
comment
@TheUnKnown Я не использую Angular.   -  person VoidChips    schedule 28.06.2019
comment
Тогда, пожалуйста, объясните, какой стек вы используете и как вы запускаете сервер, используя npm, если он не угловой.   -  person TheUnKnown    schedule 28.06.2019
comment
@TheUnKnown Нет. Я решил не использовать React для этого сайта. Вот почему я использую live-сервер вместо встроенного в React запуска npm. Я мог бы просто поместить файлы html и файл css в один и тот же каталог, если нет лучшего способа.   -  person VoidChips    schedule 30.06.2019

Ответы (4)


arrow_upward
2
arrow_downward

Пожалуйста, проверьте атрибуты тега ссылки и правильность написания их значений. text\css никогда не загрузит файл css. Правильным будет text/css (это косая черта). Также попробуйте открыть html-файл из проводника и проверить, работает ли он.

<link rel="stylesheet" type="text/css" href="style.css" />
person Rajdeep Debnath    schedule 06.09.2019
comment
Все работает на производстве. Только не на лайв-сервере. - person VoidChips; 07.09.2019

arrow_upward
1
arrow_downward

Я смог заставить его работать, переустановив расширение живого сервера на vscode. Надеюсь это поможет!

person El Evilen    schedule 19.03.2020

arrow_upward
0
arrow_downward

в VS Code щелкните правой кнопкой мыши style.css и выберите «Копировать относительный путь» и вставьте его в тег ссылки href=style.css, не пытайтесь связать, выбрав внешний путь или ввод вручную, у меня сработало на месте поскольку я пытался найти решение той же проблемы, но я не нашел его, попробовал только это в качестве последней попытки перед тем, как лечь спать !!

person Lester Martis    schedule 31.07.2020

arrow_upward
0
arrow_downward

Причина, по которой это происходит, мы можем увидеть из документации live-сервера:

Сервер представляет собой простое приложение узла, которое обслуживает рабочий каталог и его подкаталоги.

Если вместо каталога указан файл или каталог не содержит ресурсов, загружаемых 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 смотреть за пределы каталога, который он обслуживает.

Вот документация для получения дополнительной информации о параметрах конфигурации.

person AndrogenAgonist    schedule 05.07.2021