답변:
Magento 2에 대한 새로운 테마를 만드는 것은 이전에 Magento에 대한 경험이 있어도 어려운 일일 수 있습니다. 괜찮은 개발자는 핵심 Magento 파일을 변경하지 않고 대신 "래퍼"를 생성하므로 향후 패치를 설치하고 업데이트를 수행하면 모든 변경 사항이 무시되거나 잘못 병합되는 상황이 발생하지 않습니다.
Gruntfile.js 및 themes.js 파일 확장
새로운 테마를 만들었고 Magento 2 문서 에서 알 수 있듯이 dev/tools/grunt/configs/themes.jsGrunt가 테마를 추가하는 파일 을 목록에 변경해야 하므로 Grunt가 pub/static폴더로 파일을 컴파일 / 심볼릭 / 복사 / 복사 할 수 있습니다.
1 단계 : /dev/tools/grunt/configs/themes.yourthemename.js기본 themes.js파일을 다음과 같이 확장하는 파일 작성
'use strict';
var defaultThemes = require('./themes'),
_ = require('underscore');
var yourTheme = {
yourthemename: {
area: 'frontend',
name: '<vendor>/<yourthemename>',
locale: 'en_US',
files: [
'css/main',
],
dsl: 'less'
}
};
module.exports = _.extend(defaultThemes, yourTheme);
2 단계 : Gruntfile.js파일로 확장Gruntfile.yourthemename.js
'use strict';
var defaultGruntfile = require('./Gruntfile'),
_ = require('underscore');
var yourthemeGruntfile = {};
yourthemeGruntfile.themes = require('./dev/tools/grunt/configs/themes.yourthemename');
module.exports = _.extend(defaultGruntfile, yourthemeGruntfile);
3 단계 : 이제 다음과 같은 테마에 대해 Grunt 작업을 실행할 수 있습니다.
grunt --gruntfile=Gruntfile.yourthemename.js clean:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js exec:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js less:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js watch:yourthemename
exec:yourthemename얻을 Warning: Required config property "clean.yourthemename" missing. Used --force, continuing.?? clean:yourthemename명령으로 테마를 정리할 수는 없지만, exec명령이 오류없이이 작업을 수행해야한다고 생각합니다 .
dev/tools/grunt/configs을 수행 require('./themes'), 예는 다음 clean.js과 exec.js내부 CONFIGS 디렉토리가. 그러면이 파일에에서 새로 추가 된 테마가에서 없어 질 것이라고 믿게됩니다 themes.yourthemename.js. 그럼에도 불구하고이 설정은 난 그냥 내의 원인을 확인할 수없는 작동 Required config property "clean.yourthemename" missing.... 오류
시 JEV Mokrousov 의 솔루션을 맞지 않는, 당신이 시도 할 수있는 두 가지 대안이있다 :
magento/magento2-base패키지를 설치하는 동안 Magento2 기본 매핑 ( 프로젝트 참조) 으로 인해 파일 Gruntfile.js과 폴더 dev/tools가 패키지에서 루트 폴더로 복사되어 기존 파일을 덮어 씁니다 .composer.jsonvendor/magento/magento2-base/composer.json
{
"extra": {
"map": [
[
"dev/tools",
"dev/tools"
],
[
"Gruntfile.js",
"Gruntfile.js"
]
]
}
}
당신의 버전 Gruntfile.js과 dev/tools/grunt/configs/themes.js어딘가에 배치 할 수 있습니다 (우리는에 빌드 디렉토리 구조 안에 넣었습니다 build/tools/grunt/).
이제 특정 Composer 이벤트 전이나 후에 추가 명령이나 스크립트 를 추가 할 수 있습니다 . Composer의 post-install-cmd이벤트에 연결하여 Magento의 핵심 파일에 이러한 파일 버전을 복사 할 수 있습니다. 이것을 프로젝트에 추가해야합니다 composer.json:
{
"scripts": {
"post-install-cmd": "cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/"
}
}
이것은 당신에게 보여줄 것입니다 :
> cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/ ‘build/tools/grunt/Gruntfile.js’ -> ‘Gruntfile.js’ ‘build/tools/grunt/themes.js’ -> ‘dev/tools/grunt/configs/themes.js’
방금처럼 magento/magento2-base(상기와 같이) 패키지는 프로젝트의 루트에 파일을 매핑 당신은 또한이 직접 할 수 있습니다.
테마를 별도의 Composer 패키지에 넣을 수 있습니다. 이를 위해 별도의 리포지토리를 만들어야합니다. Magento 문서는 이미이 프로세스를 설명하고 있습니다. "테마를 Composer 패키지로 만들기"를 참조하십시오.
이제 테마 composer.json파일 에 이것을 추가 하십시오.
{
"extra": {
"map": [
[
"dev/tools/grunt/configs/themes.js",
"dev/tools/grunt/configs/themes.js"
],
[
"Gruntfile.js",
"Gruntfile.js"
]
]
}
}
첫 번째 경로가 테마 패키지 내의 올바른 위치를 가리키는 지 확인하십시오. 경로는 테마 composer.json파일 의 위치와 관련이 있습니다.
경고 :
두 솔루션 모두 핵심 파일을 덮어 씁니다. 패치 나 업그레이드 문제가 발생할 수 있습니다. 패치 및 업그레이드시 항상 변경 사항을 확인하고 이러한 변경 사항을 이러한 코어 파일 사본에 적용해야합니다.
많은 사람들이 테마를 처음부터 완전히 작성하지 않고 부모 테마를 확장 한다는 것을 확신 하기 때문에 themes.yourThemeName.js파일에 대해 약간 다른 구문이 제공 됩니다. 테마의 구성을 처음부터 완전히 정의하기보다는 부모로부터 상속 한 다음 새로운 / 다른 것을 추가 / 수정합니다.
이 예제에서 우리는 blank의 설정에서 상속하고, 테마 이름을 설정하고, 테마의 추가 루트 파일을 추가합니다. 이것의 이점은 부모 테마에서 모든 파일을 명시 적으로 선언 할 필요가 없다는 것입니다. 정기적으로 업데이트를받는 부모 테마를 확장하는 사람들에게는 이것이 도움이 될 수 있습니다. (여기서 예제 시나리오로 공백을 사용하는 것이 가장 적합한 상황은 아니지만 여기에 적용된 개념이 중요합니다.)
'use strict';
// If your theme's parent has it's own "themes.someOtherName.js" file,
// require that file instead of Magento's native "themes.js" file.
var defaultThemes = require('./themes'),
_ = require('underscore');
// Update "blank" to the name of your parent theme's Grunt config.
// Update "<vendor>/<yourThemeName>"
var yourThemeNameConfig = _.extend(defaultThemes.blank, {name:'<vendor>/<yourThemeName>'});
// Change this to add your root files, add more as necessary
yourThemeNameConfig.files.push('css/new-file');
// Change "yourThemeName" to what you want to reference in your Grunt command.
module.exports = _.extend(defaultThemes, { yourThemeName: yourThemeNameConfig });