Як додати користувацький файл 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

— Джошуа34
джерело

Привіт, я щойно зробив це, але доданий файл css не завантажується, і коли я переглядаю сторінку, це дає мені GET помилку для файлу, з 500 (внутрішня помилка сервера). може бути?

— alexcr

Команда CLI для розгортання: php bin / magento setup: static-content:

— installation

Що я повинен помістити у створені два нових файли CSS? Просто чистий CSS ??

— styzzz

@styzzz так, сирий CSS - це нормально.

— Джошуа34

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

— styzzz

Для того, щоб додати спеціальний css та завантажити останнє

Дотримуйтесь структури каталогів

app / code / vendor / name module / view / frontend (для адміністратора adminhtml) / web / css / filename.css
Додайте шлях до файлу css до відповідного файлу макета, як зазначено нижче
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— Маніш
джерело

У тому числі Vendor_Moduleне працює для мене. Видалення його працює нормально.

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

@SaravananDS потрібно замінити на ім'я вашого пакета та модуля.

— Маніш

Так. Після заміни на мій звичайний Vendor_Moduleвін не працює.

— Сараванан DS

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

— jafar pinjar

Тут не потрібно використовувати дочірню тему?

— HaFiz Umer

Ви можете додати медіа-атрибут, який magento 2 поставить до кінця css у розділі заголовка. Встановлення ширини лише в 1 пікс дозволить на всіх пристроях:

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

— Cypher909
джерело

дякую, ти врятував мені день. Я ddint хочу працювати з файлами .less і компілювати щоразу, коли я їх редагую.

— буракс

тут не потрібно спочатку робити власну тему?

— Хафіз Умер

@HaFizUmer Спершу слід створити власну тему. Дотримуйтесь інструкцій з прийнятої відповіді, а потім скористайтеся методом, який я показую тут.

— Cypher909