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

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

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

magento2 css

Ответы:

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

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

 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>

Примените свою тему: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Развертывание статических ресурсов (SSH в корневой каталог magento):

php bin/magento setup:static-content:deploy

— Joshua34
источник

Привет, я только что сделал это, но файл CSS, который я добавляю, не загружается, и когда я осматриваю страницу, она выдает мне ошибку GET для файла, с 500 (Internal Server Error) у вас есть какое-либо представление о том, что это возможно?

— alexcr

Команда CLI для развертывания: php bin / magento setup: static-content: deploy

— Joshua34

Что я должен вставить в два новых файла CSS, которые я создал? Просто чистый CSS ??

— styzzz

@styzzz да, с сырым css все в порядке.

— Joshua34

Ага. Я только что сделал это, загрузил файлы local-m.css и local-l.css в web / css .... очистил кеш и запустил php bin / magento setup: static-content: deploy. Я в режиме разработчика. Это все еще не поднимает их. Мой default_head_blocks.xml точно такой же, как и выше. Но все еще не используются те стили, которые я установил в CSS

— styzzz

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

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

app / code / vendor / modulename / view / frontend (для администратора adminhtml) / web / css / filename.css
Добавьте путь к файлу CSS в соответствующий файл макета, как показано ниже
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— Manish
источник

В том числе Vendor_Moduleи у меня не работает. Удаление это работает нормально.

— Сараванан Д.С.

@SaravananDS вам нужно заменить на ваш пакет и имя модуля.

— Маниш

Да. После замены на мой Vendor_Moduleтолько он не работает.

— Сараванан DS

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

— Джафар Пинджар

Здесь не надо использовать child-theme?

— ХаФиз Умер

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

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
источник

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

— Бура

здесь не нужно делать пользовательские темы в первую очередь?

— Хафиз Умер

@HaFizUmer Сначала вы должны создать собственную тему. Следуйте инструкциям из принятого ответа, а затем используйте метод, который я показываю здесь.

— Cypher909