Как добавить пользовательский файл CSS в Magento 2

30

Есть ли способ создать свой собственный файл CSS, который загружается последним в каскаде?

Если да, то как и где я могу добавить свой собственный файл CSS?

magento2 css Г. Ферренс
источник

Ответы:

43

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

  1. Создать тему: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Убедитесь, что вы установили приложение Magento в режим разработчика.
  3. Добавьте следующие папки в свою собственную тему

-

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Создайте следующие файлы:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

поместите этот код в default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Примените свою тему: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Развертывание статических ресурсов (SSH в корневой каталог magento):

-

php bin/magento setup:static-content:deploy
Joshua34
источник
Привет, я только что сделал это, но файл CSS, который я добавляю, не загружается, и когда я осматриваю страницу, она выдает мне ошибку GET для файла, с 500 (Internal Server Error) у вас есть какое-либо представление о том, что это возможно?
alexcr
1
Команда CLI для развертывания: php bin / magento setup: static-content: deploy
Joshua34
Что я должен вставить в два новых файла CSS, которые я создал? Просто чистый CSS ??
styzzz
1
@styzzz да, с сырым css все в порядке.
Joshua34
Ага. Я только что сделал это, загрузил файлы local-m.css и local-l.css в web / css .... очистил кеш и запустил php bin / magento setup: static-content: deploy. Я в режиме разработчика. Это все еще не поднимает их. Мой default_head_blocks.xml точно такой же, как и выше. Но все еще не используются те стили, которые я установил в CSS
styzzz
15

Для того, чтобы добавить пользовательский CSS и загрузить последний

  1. Следуйте структуре каталогов

    app / code / vendor / modulename / view / frontend (для администратора adminhtml) / web / css / filename.css

  2. Добавьте путь к файлу CSS в соответствующий файл макета, как показано ниже

    <head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
Manish
источник
В том числе Vendor_Moduleи у меня не работает. Удаление это работает нормально.
Сараванан Д.С.
@SaravananDS вам нужно заменить на ваш пакет и имя модуля.
Маниш
Да. После замены на мой Vendor_Moduleтолько он не работает.
Сараванан DS
@Manish, мы можем загрузить собственный файл CSS только на странице результатов поиска?
Джафар Пинджар
Здесь не надо использовать child-theme?
ХаФиз Умер
5

Вы можете добавить атрибут media, который magento 2 поместит в конец css в разделе head. Установка ширины всего 1px включит ее на всех устройствах:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>
Cypher909
источник
спасибо, ты спас мой день. Я не хочу работать с файлами .less и компилировать их каждый раз, когда редактирую их.
Бура
здесь не нужно делать пользовательские темы в первую очередь?
Хафиз Умер
@HaFizUmer Сначала вы должны создать собственную тему. Следуйте инструкциям из принятого ответа, а затем используйте метод, который я показываю здесь.
Cypher909