Magento2: mejor práctica para modificar archivos css

14

Quiero modificar el archivo css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Inicialmente, este archivo no está presente en la carpeta pub / static y está presente en

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

Cuando utilizo contenido estático usando php bin/magento setup:static-content:deploy, se crean 2 archivos en pub / static relacionados con él.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Soy un desarrollador respaldado y, mientras desarrollo módulos, tiendo a eliminar lo que esté presente en pub / static (excepto .htaccess). Entonces, para mí, no parece ser la mejor opción para modificar directamente pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

En ese caso, ¿cuál es la mejor práctica para modificar el archivo css anterior?
1. Debo modificar pub/static/frontend/Magento/luma/en_US/css/styles-l.lesso
2. Entiendo que puedo eliminar todo pub/static(durante el desarrollo) y debo modificarlo pub/static/frontend/Magento/luma/en_US/css/styles-l.cssy nunca eliminarlo.

— amitshree
fuente

19

No debe editar / modificar archivos dentro del directorio pub / * o vendor / *. Pub es para implementación y el proveedor es para estructura predeterminada, que puede anular a través de su plantilla o módulos personalizados. En lugar:

cree un nuevo tema dentro de app / design / frontend / {vendor} / {yourTheme} /. Puede usar el tema en blanco o Luma. También puede crear un nuevo tema que herede de Blank (la herencia se define en theme.xml). Si ya está usando algún tema, omita este paso.
edite .less dentro de su tema para que los cambios permanezcan visibles y no se reemplacen al borrar el caché o actualizar el sistema.
Use gruñido para compilar su .less en archivos de implementación.
También puede configurar mapas de origen para señalar su estilo dentro de los archivos .less del tema para que pueda ser más productivo.

Algunas referencias útiles:

— g5wx
fuente

Gracias. Estoy usando el tema Templatemonster/themey styles-l.lessno está presente en el tema. ¿Debo copiar vendor/magento/theme-frontend-blank/web/css/styles-l.lesspara app/design/frontend/Templatemonster/theme/web/css/styles-l.lessusarlo / modificarlo?

— amitshree

2

No, debe editar menos archivos dentro de Templatemonster / theme - styles - *. Menos archivos dentro del directorio pub ya son archivos compilados de su tema y otros recursos y no deben modificarse / modificarse. Cuando termine de editar sus archivos dentro de su tema TM ejecute gruñido para compilarlos en recursos finales, que se implementarán en la carpeta pub. También puede usar mapas de origen para señalar los menos archivos de su tema.

— g5wx

Gracias de nuevo. Solo para aclarar que, aunque tenga que modificar la propiedad de las clases presentes en styles-l.lessdel magento/theme-frontend-blanktema que debería usar / sobrescribir esas clases en cualquiera de (o nuevo) css en mi tema de TM y modificar en consecuencia. ¿El magento/theme-frontend-blanktema se comporta de la misma manera que el base/defaulttema funcionaba en Magento1?

— amitshree

1

Sí, cualquier cambio que desee crear debe reflejarse en su plantilla para que el alcance de la modificación permanezca local dentro de esa plantilla y no se anule en las actualizaciones. La plantilla en blanco en M2 tiene la misma función básica como Predeterminado en M1: es decir, tener una base de definiciones ya creada y su tema extendido puede tener una reserva para elementos que no modifica.

— g5wx

4

Este enfoque me ha funcionado

Realice los cambios necesarios en el archivo .less y luego ejecute los siguientes comandos:

php bin/magento setup:upgrade

php bin/magento cache:flush

— adityaekawade
fuente

3

Si otro tema debe 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
fuente

2

En el archivo dev / tools / grunt / configs / theme.js

— Patrick-Peng,

3

Este es el diagrama de flujo que explica cómo magento2 procesa archivos css.

Fuente: Inchoo

— Príncipe Patel
fuente

0

Sugeriría ejecutar

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

Como sabrías

php bin/magento setup:upgrade

limpiará el caché y el contenido estático, y

php bin/magento setup:static-content:deploy

desplegará todos los temas en la <mageroot>/pubcarpeta. Este comando reducirá significativamente la primera carga de su tienda.

— Aakash
fuente