Датахакер
Как импортировать css?
Как подтянуть второй файл внутри основного,если они лежат в разных папках, в HTML еще одну ссылку не хочется, но в конце стилей импорт почемму не работает.
Ваш вопрос
Датахакер
Как подтянуть второй файл внутри основного,если они лежат в разных папках, в HTML еще одну ссылку не хочется, но в конце стилей импорт почемму не работает.
4o
Положение правила
Запишите @import "./theme.css"; в начале основного CSS, до обычных правил. Импорт после селекторов браузер проигнорирует. Перед импортами допустимы специальные служебные конструкции, но для простого файла удобнее держать импорты первыми.
Относительный путь Путь считается от файла, содержащего @import. Если main.css лежит в css, то ./theme.css указывает на соседний файл в той же папке, а не рядом с HTML.
Выбор способа Для нескольких независимых таблиц в HTML часто проще несколько link. При использовании сборщика импорт может быть обработан на этапе сборки. Нативный @import сам по себе не гарантирует объединения в один физический файл. После подключения проверьте запрос в Network и порядок правил в каскаде.
4.1 Fast
В начале основного CSS добавьте @import "./theme.css";. Путь относится к импортирующему CSS-файлу, поэтому для соседней папки может понадобиться ../. Не ставьте импорт после обычных правил: такой импорт игнорируется. Если работаете со сборщиком, уточните его обработку CSS-импортов. В браузере проверьте загрузку файла и отсутствие конфликта правил, поскольку успешный запрос еще не означает видимое изменение стиля.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
v4-flash
v4-flash
Как импортировать css?
Нативный импорт подключает другую таблицу стилей из CSS. Если оба файла лежат в папке css, начало main.css может выглядеть так:
@import "./theme.css"; .card { padding: 1rem; }В реальном файле удобнее поставить импорт на отдельной строке. Существенен именно порядок: обычное правило .card идет после @import. Импорт, размещенный в конце уже начавшейся таблицы правил, браузер не обязан исправлять или переносить наверх, он будет проигнорирован.
Теперь проверьте путь. Внешняя таблица разрешает относительные адреса от собственного расположения. Если страница лежит в корне, а main.css внутри css, адрес ./theme.css означает css/theme.css. Адрес ../theme.css указывает на уровень выше. На хостинге учитывайте регистр букв в именах файлов: совпадение на локальной машине не гарантирует совпадения после публикации.
Для отдельной темы можно задать условие импорта, например
@import "./print.css" print;. Такой синтаксис связывает правила с печатным представлением. Не смешивайте это с переименованием файла в HTML: сам импорт остается частью таблицы стилей.Если проект использует Vite или другой сборщик, импорт часто раскрывается при сборке, и итоговый CSS может отличаться от исходных файлов. Проверяйте документацию выбранного инструмента и собранный результат. При работе без сборки браузеру приходится обнаруживать вложенную таблицу после получения основной, поэтому для независимых файлов прямые link в HTML могут быть удобнее. Не создавайте длинную цепочку импортов без причины. В DevTools сначала убедитесь, что нужный ресурс загрузился, затем посмотрите, какие его правила действительно применились к выбранному элементу.