Magento2: лучшая практика для модификации CSS-файлов

14

Я хочу изменить файл CSS pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Изначально этот файл отсутствует в папке pub / static и находится в

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

Когда я использую статическое содержимое php bin/magento setup:static-content:deploy, в pub / static создается 2 файла, связанных с ним.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Я поддерживаемый разработчик, и при разработке модулей я склонен удалять все, что присутствует в pub / static (кроме .htaccess). Так что для меня это не лучший вариант для прямой модификации pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

В таком случае, какова лучшая практика для изменения вышеуказанного файла CSS?
1. Должен ли я изменить pub/static/frontend/Magento/luma/en_US/css/styles-l.lessили
2. Я неправильно понимаю, что могу удалить все из pub/static(во время разработки), и я должен изменить pub/static/frontend/Magento/luma/en_US/css/styles-l.cssи никогда не удалять это.

magento2 css frontend best-practice amitshree
источник

19

Вы не должны редактировать / изменять файлы в каталоге pub / * или vendor / *. Pub предназначен для развертывания, а vendor - для структуры по умолчанию, которую вы переопределяете с помощью своего шаблона или пользовательских модулей. Вместо:

создайте новую тему в приложении / design / frontend / {vendor} / {yourTheme} /. Вы можете использовать бланк или тему Luma. Вы также можете создать новую тему, которая наследуется от Blank (наследование определяется в theme.xml). Если вы уже используете какую-то тему, пропустите этот шаг.
отредактируйте .less в своей теме, чтобы изменения оставались видимыми и не заменялись при очистке кэша или обновлении системы.
Используйте grunt для компиляции вашего .less в файлы развертывания.
Вы также можете настроить исходные карты для точного определения стиля в файлах .less, чтобы повысить производительность.

Несколько полезных ссылок:

g5wx
источник

Спасибо. Я использую тему Templatemonster/themeи styles-l.lessнет в теме. Должен ли я скопировать vendor/magento/theme-frontend-blank/web/css/styles-l.lessв, app/design/frontend/Templatemonster/theme/web/css/styles-l.lessчтобы использовать / изменить его?

amitshree

2

Нет, вы должны редактировать меньше файлов в Templatemonster / theme - styles - *. Меньше файлов в каталоге pub уже скомпилированы из вашей темы и других ресурсов и не подлежат изменению / изменению. Когда вы закончите редактирование файлов в своей теме TM, запустите grunt, чтобы скомпилировать их в конечные ресурсы, которые будут развернуты в папке pub. Вы также можете использовать исходные карты, чтобы точно указать меньше файлов из вашей темы.

g5wx

Еще раз спасибо. Просто чтобы прояснить это, если я должен изменить свойство классов в настоящее время styles-l.lessиз magento/theme-frontend-blankтемы я должен использовать / перезаписать эти классы в любом из (или новых) CSS - файлы в моей теме Т.М. и изменить соответствующим образом . Вести ли magento/theme-frontend-blankтема так же, как base/defaultона работала в Magento1?

amitshree

1

Да, любые изменения, которые вы хотите создать, должны быть отражены в вашем шаблоне, поэтому объем изменений остается локальным в этом шаблоне и не переопределяется при обновлениях. Пустой шаблон в M2 имеет ту же базовую функцию, что и Default в M1, то есть базовые определения уже созданы, и ваша расширенная тема может иметь запасной вариант для элементов, которые вы не изменяете.

g5wx

4

Этот подход сработал для меня

Внесите необходимые изменения в файл .less, а затем выполните следующие команды:

php bin/magento setup:upgrade

php bin/magento cache:flush

adityaekawade
источник

3

Если другая тема, вы должны настроить:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

Патрик-Пэн
источник

2

В файле dev / tools / grunt / configs / theme.js

Патрик-Пенг

3

Это блок-схема того, как magento2 обрабатывает CSS-файлы.

Источник: Inchoo

Принц Патель
источник

0

Я бы предложил выполнить

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Как вы знаете,

php bin/magento setup:upgrade

очистит кеш и статический контент, и

php bin/magento setup:static-content:deploy

развернет все темы в <mageroot>/pubпапке. Эта команда значительно уменьшит время первой загрузки вашего магазина.

Aakash
источник

Magento2: лучшая практика для модификации CSS-файлов

Ответы: