Magento2 : CSS 파일을 수정하는 모범 사례

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하고 그것을 삭제하지 않았다.

pub / * 또는 vendor / * 디렉토리에있는 파일을 편집 / 수정해서는 안됩니다. Pub은 배포 용이며 공급 업체는 기본 구조용이며 템플릿 또는 사용자 지정 모듈을 통해 재정의합니다. 대신 :

• app / design / frontend / {vendor} / {yourTheme} / 내에 새로운 테마를 만듭니다. 공백 또는 루마 테마를 사용할 수 있습니다. Blank에서 상속되는 새 테마를 만들 수도 있습니다 (상속은 theme.xml에 정의 됨). 이미 일부 테마를 사용중인 경우이 단계를 건너 뛰십시오.
• 캐시를 지우거나 시스템을 업그레이드 할 때 변경 사항이 계속 표시되고 대체되지 않도록 테마 내에서 .less를 편집하십시오.
• grunt를 사용하여 .less를 배포 파일로 컴파일하십시오.
• 또한 테마 .less 파일 내에서 스타일을 지정하도록 소스 맵을 설정하여 생산성을 높일 수 있습니다.

유용한 참고 자료 :

• Less로 시작하기
• 마 젠토 2에서 더 적은 디버깅
• 마 젠토 2에서 테마 만들기
• Grunt 시작하기
• 마 젠토 UI 라이브러리

이 접근법은 저에게 효과적이었습니다.

.less 파일에서 필요한 사항을 변경 한 후 다음 명령을 실행하십시오.

php bin/magento setup:upgrade

php bin/magento cache:flush

다른 테마 인 경우 다음을 구성해야합니다.

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

이것은 magento2가 CSS 파일을 처리하는 방법에 대한 순서도입니다.

출처 : Inchoo

나는 실행을 제안 할 것이다

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폴더에 모든 테마를 배포 합니다. 이 명령은 상점의 처음로드를 크게 줄입니다.