Файл CSS неправильно связывается с html в отдельных папках
У меня возникли проблемы с привязкой файла css к index.html. Если он находится в той же папке, то он работает, но если я перемещу файл CSS на одну папку выше, он, похоже, не работает даже с обозначением ../. Вот изображение кода с настройкой каталога файлов. Отдельная папка
Разве «../src/index.css» не должен подниматься вверх по папке, а затем спускаться по src/, чтобы найти файл?
Возможный дубликат Ссылка на файлы css из реагирующего индекса
@Ken, ты можешь увидеть эту ссылку stackoverflow.com/questions/56747558/…..
просто попробуйте ./src/index.css
@PavanNagadiya К сожалению, это тоже не работает
извини, мой друг, я забыл добавить еще одну дотацию, просто попробуй ../src/index.css, это работает для меня, я только что попробовал это в своей системе.
Ответы 5
Поместите файл index.css в общедоступный файл и добавьте его в файл index.html с помощью этой команды.
<link rel = "stylesheet" href = "%PUBLIC_URL%/../style.css" />
Вы не можете поместить файл на корневой уровень и связать его с index.html. Но лучше всего реагировать на стиль, добавляя отдельный компонент.
Если я опубликую index.css, он будет работать только с href = "index.css". У меня также возникает эта проблема, когда я не использую React
да, вы не можете получить доступ к css из корневого пути, это главное здесь.
Должен ли я иметь доступ к нему с относительными путями?
Избавьтесь от ./ и начните с ../
../ will take you to the root of your project and the you can traverse to the required file from there.
<link rel = "stylesheet" href = "../path-to-file.css" />
Я попробовал это на втором изображении (Проблема), но это не работает.
В этом случае вам нужно будет переместить файл css в общую папку. Все ваши ресурсы, такие как изображения, css и т. д., должны быть общедоступны. После перемещения вы можете использовать <link rel = "stylesheet" href = "%PUBLIC_URL%/path-to-file.css" /> Надеюсь, это поможет.
Начните свой путь с символа /, и вы будете использовать абсолютный URL-адрес каждый раз. То есть используйте href = "/src/App.css" Однако похоже, что вы используете фреймворк, а не обычный HTML/CSS. Если ваши файлы компилируются в фактическое веб-приложение, вам нужно будет использовать путь для окончательного вывода, а не исходное местоположение, но ваша структура предоставит для этого переменную, которую вы привязываете к началу своего пути вместо /.
(Проблема с использованием относительных путей, таких как ../, заключается в том, что вам придется менять путь для каждого другого уровня в вашей файловой иерархии, что является рецептом несогласованности и ошибок. Абсолютный путь одинаков для каждого файла в вашем приложении. )
Я думал, что React — это библиотека, а не фреймворк, но в любом случае я не знал, что HTML/CSS можно компилировать. Я также не знал об этой проблеме с относительными путями. Спасибо за понятное объяснение! Это сводило меня с ума.
Вы запускаете файл index.html, используя статический сервер? Если да, то перейдите в корневой каталог и запустите
static-server -i ./public/index.html
-i для предоставления индексного файла вручную.
Если вы запускаете статический сервер в общей папке, он не берет css из корневого каталога. Сохраните href как «../index.css». Оно работает.
Похоже, вы правильно используете реакцию и создание-реагирование-приложение? Если да, то вы не можете получить доступ к чему-либо за пределами этой папки из нее, потому что среда реагирования построена с общедоступной папкой как единственной общедоступной папкой.
Так что это хорошее место для размещения папки img и тому подобного. У вас есть 2 варианта здесь. Вы можете либо поместить свой глобальный файл css в общую папку, либо сослаться на него из своего html-файла. Вы также можете создать папку css в общей папке для хранения ваших файлов css.
Или большинство людей просто импортируют файлы css в компоненты. Итак, для вашего глобального CSS вы можете просто импортировать его в файлы index.js или app.js следующим образом:
import './index.css'
Но пытаться получить доступ к чему-либо из файла в вашей общей папке к файлу за пределами общей папки — бесполезно.
Я не знал, что среда реагирования накладывает это ограничение, спасибо!
вам нужно поставить href = "./../index.css", это должно работать, просто скажите мне, если это так