Magento2: Prática recomendada para modificar arquivos css

14

Eu quero modificar o arquivo css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Inicialmente, esse arquivo não está presente na pasta pub / static e está presente em

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

Quando eu deply conteúdo estático usando php bin/magento setup:static-content:deploy, 2 arquivos são criados em pub / static relacionados a ele.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Sou um desenvolvedor de backup e, enquanto desenvolvo módulos, tendem a excluir o que estiver presente no pub / static (exceto .htaccess). Então, para mim, não parece ser a melhor opção para modificar diretamente pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Nesse caso, qual é a melhor prática para modificar o arquivo css acima?
1. Devo modificar pub/static/frontend/Magento/luma/en_US/css/styles-l.lessou
2. Meu entendimento está errado de que posso excluir tudo pub/static(durante o desenvolvimento) e devo modificá-lo pub/static/frontend/Magento/luma/en_US/css/styles-l.csse nunca excluí-lo.

magento2 css frontend best-practice amitshree
fonte

19

Você não deve editar / modificar arquivos no diretório pub / * ou vendor / *. Pub é para implantação e fornecedor é para estrutura padrão, que você substitui por meio de seu modelo ou módulos personalizados. Em vez de:

crie um novo tema em app / design / frontend / {vendor} / {yourTheme} /. Você pode usar o tema Em branco ou Luma. Você também pode criar um novo tema que herda de Blank (a herança é definida em theme.xml). Se você já estiver usando algum tema, pule esta etapa.
edite .less no seu tema para que as alterações permaneçam visíveis e não sejam substituídas ao limpar o cache ou atualizar o sistema.
Use o grunhido para compilar seu .less em arquivos de implantação.
Você também pode configurar mapas de origem para apontar seu estilo nos arquivos .less do tema, para que você possa ser mais produtivo.

Algumas referências úteis:

g5wx
fonte

Obrigado. Estou usando o tema Templatemonster/themee styles-l.lessnão está presente no tema. Devo copiar vendor/magento/theme-frontend-blank/web/css/styles-l.lesspara app/design/frontend/Templatemonster/theme/web/css/styles-l.lessusá-lo / modificá-lo?

amitshree

2

Não, você deve editar menos arquivos no Templatemonster / theme - styles - *. Menos arquivos no diretório pub já são arquivos compilados a partir do seu tema e outros recursos e não devem ser modificados / alterados. Quando você terminar de editar seus arquivos no tema da TM, execute o grunhido para compilá-los nos recursos finais, que serão implantados na pasta pub. Você também pode usar mapas de origem para apontar menos arquivos do seu tema.

G5wx

Obrigado novamente. Só para esclarecer que, se eu tiver que modificar propriedades das classes presentes no styles-l.lessde magento/theme-frontend-blanktema que eu deveria usar / substituir essas classes em qualquer um (ou novo) arquivos CSS no meu tema TM e modificar em conformidade. O magento/theme-frontend-blanktema se comporta da mesma maneira que o base/defaulttema estava funcionando no Magento1?

amitshree

1

Sim, todas as alterações que você deseja criar devem ser refletidas no seu modelo, para que o escopo da modificação permaneça local dentro desse modelo e não seja substituído nas atualizações. O modelo em branco no M2 tem a mesma função básica como Padrão no M1 - ou seja, já existem definições básicas criadas e o tema estendido pode ter um substituto para os elementos que você não modifica.

G5wx

4

Essa abordagem funcionou para mim

Faça as alterações necessárias no arquivo .less e execute os seguintes comandos:

php bin/magento setup:upgrade

php bin/magento cache:flush

adityaekawade
fonte

3

Se outro tema você deve configurar:

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'
    }
};

Patrick-Peng
fonte

2

No arquivo dev / tools / grunt / configs / theme.js

Patrick-Peng

3

Este é o fluxograma de como o magento2 processa arquivos css.

Fonte: Inchoo

Prince Patel
fonte

0

Eu sugeriria executar

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

Como você saberia,

php bin/magento setup:upgrade

limpará o cache e o conteúdo estático e

php bin/magento setup:static-content:deploy

irá implantar todos os temas na <mageroot>/pubpasta. Este comando reduzirá significativamente o primeiro carregamento da sua loja.

Aakash
fonte

Magento2: Prática recomendada para modificar arquivos css

Respostas: