CSS не отображается при открытии с файлами

#css #sass

Вопрос:

Мой css работает только тогда, когда я открываю его с помощью live-сервера. Я не осознавал этого, пока не попытался открыть файл своих проектов. Функциональность JS есть, но мой проект просто устаревший, просто черно — белый. Я использую компилятор sass и live-sass. А также с помощью листка api карт и открытого api погоды. ПОЭТОМУ, пожалуйста, помогите, кажется, не могу понять, почему мой css отсутствует, когда я открываю свой проект в файле или в другом браузере.

1. Не могли бы вы предоставить более подробную информацию о вашей структуре каталогов, о том, как вы импортируете свой CSS-файл?

2. у меня есть index.html, app.js и папка sass, в которой содержится мой основной файл.scss, который преобразует его в обычный css с помощью живого компилятора sass. И мой стиль.css-это ссылка, как обычно.

3. Я не могу помочь вам с этой маленькой деталью. Это так двусмысленно.

4. эй, Нгуен, большое спасибо за помощь. Не могли бы вы, пожалуйста, проверить мой github. github.com/rabtennamgyal/Basic-Project-/tree/main/… Я не использую никакой пакет или что-то еще. У меня есть файл, в котором содержится моя index.html, app.js и моя папка с нахальством, вот и все. Пожалуйста, проверьте мой github, где находится этот файл, пожалуйста, ПОМОГИТЕ.

Ответ №1:

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

У вас есть изображение звездного неба, верно? Вы можете видеть только черно-белую страницу с некоторыми значками после поиска, потому что ваше изображение не было загружено.

Когда вы открываете страницу, открывая файл, URL-адрес изображения в вашем CSS-файле-это путь к текущему CSS-файлу, что означает, что URL-адрес должен быть ../image/night.jpg .

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

Надеюсь, что я правильно понимаю вашу проблему. Я тоже все еще учусь 🙂

1. большое спасибо, я действительно ценю это. Но нет, проблема была не в этом. postimg.cc/N97R8CHc мой проект выглядит так, навигационная панель слишком большая, и все стили перепутались. Но js и api погоды, который я использую, все еще работают. Но спасибо за вашу помощь.

2. @TheMonkeyKing Ваш CSS-файл загружен, поэтому большая панель навигации и стили-это ваша проблема с CSS или JS-кодом (я еще не проверял это). Но белый фон вызван неправильным URL-адресом. Попробуй это изменить.

3. как именно мне изменить свой URL-адрес. когда я использую live-сервер, он работает, но не при открытии с помощью файла.

4. @TheMonkeyKing Как я объяснял выше, когда вы используете live-сервер, URL-адрес изображения связан с хостом, но когда вы открываете файл, URL-адрес изображения должен быть связан с файлом. На изображении, которое я загрузил, вы видите, что URL-адрес фонового изображения теперь .. находится перед первым / , чтобы соотнести его с файлом изображения.

5. Чувак, я наконец-то понял это. Большое спасибо, это был img, но главная проблема заключалась в ссылке sass/css в html. И по какой-то причине, когда я использую rem, размеры были в порядке, но когда я открываю файл, размеры становятся слишком большими… так что это тоже пришлось изменить. В любом случае, большое спасибо. 🙏🙏🙏