Shopify에서 오리지널 Sass 디자인 가져오기

개요
지난해부터 이어진 신종 코로나 여파로 EC 웹사이트를 개설하는 기업이 늘어나는 가운데 월경 EC 웹사이트를 단순 제작할 수 있는 쇼피파이의 수요도 늘고 있다.
또 제작자도'','css','javascript'등의 코드를 편집할 수 있어 더 자유로운 EC 사이트를 만들 수 있다.
처음에 쇼피파이에서 EC 사이트를 개발한 여러분은 일단 뭘 접해야 할지 모르고, 화면 관리에도 힘드시겠죠.
또 습관적인 Sass와 오리지널 파일 디자인을 사용하는 것이 얼마나 수월할 것 같으냐는 의견도 많다.
이번에는 이 같은 과제를 해결하기 위한 보도다.
이 기사에 전하고 싶은 이야기.
쇼피파이 관리 화면 내에서도 코드를 편집하는 테마를 개발할 수 있지만, 평소와 환경이 달라 평소 사용하던 단축키를 사용할 수 없고, 코드를 성형할 수 없고, ss를 사용할 수 없나요?등 다양한 과제가 있어 생산성이 매우 떨어진다.
이번에 우리는 그중의 한 과제인 Sass의 도입과 문서 디자인 방법에 중점을 두고 보도를 진행하였다.
내용은 다음과 같다.

Shopify에서 Sass 가져오기

Shopify를 통한 Sass 파일 설계

전제 조건

텍스트 편집기는 vscode를 사용합니다.Shopify의 테마 개발로 프로그램을 사용하면 vscode로 만들 수 있습니다.이것도 중요하지만 이미 좋은 소식이 많으니 이번에는 생략하도록 허락해 주십시오.vscode의 제작 방법에 대해 아래의 보도는 이해하기 쉬우니 참고 설정으로 부탁드립니다.

파일 설계는 css가 PRECSS로 설계된 것으로 가정합니다.

Shopify에서 Sass 가져오기
1. Sass 컴파일 준비
vscode 확장 기능인 "Live Sass Compiler"을 설치합니다.
Live Sass Compiler"는 Sass 파일을 감시하고 자동으로 컴파일할 수 있기 때문에 특히 glop 등 임무 주자를 가져올 필요가 없다.
Shopify에서 Sass를 처리할 때, 나는 이 확장 기능이 충분하다고 생각한다.
vscode 아래 메뉴에 추가된 "Watch Sass"를 클릭하여 Sass 파일을 모니터링하고 자동으로 컴파일합니다.
2. Sass 파일 만들기
Shopify의 assets 디렉터리에 테마 고유의 css와javascript가 저장되어 Sass 파일을 만듭니다.
이번에 제작된 서류는 index.scss입니다.

3. 출력 css 파일 컴파일
"Watch Sass"를 클릭하면 첨부 파일과 같이 파일이 컴파일되어 출력됩니다index.css.
이후 "Live Sass Compiler"은 계속 감시하기 때문에 코드를 저장할 때마다 컴파일합니다.

이후 해당 페이지에서 index.css의 기술을 읽으면 Sass를 성공적으로 가져옵니다.
theme.liquid

<link rel="preload" href="{{ 'index.css' | asset_url }}" as="style">

Shopify를 사용하여 Sass 파일 설계
사전 요구 사항에 따라 PRECSS의 기본 설계에 따라 파일 설계를 수행합니다.
특별히 어려운 것은 없습니다. 다만 평소와 같이 vscode의 해당 위치에 필요한 디렉터리와 파일을 추가할 뿐입니다.
디렉터리 추가에 관해서는 Shopify 관리 화면에서는 사실상 안 된다.
환경을 vscode로 옮기면 이 방법은 실현될 수 있다.
따라서 추가된 디렉터리의 파일은 Shopify에 반영되지 않기 때문에 모든 import을 assets 산하의 scss 파일로 출력하십시오.
이번에 assets에서 다음과 같은 파일 디자인을 제작했습니다.
scss 파일에 대해 저는 잠시 Block 산하에서 _card.scss,element 산하에서 제작_btn.scss하고 assets 산하에서 방금 제작한 index.scss에서 import을 하고 싶습니다.
assets/
　├ index.scss
　├ _modules/
　 　└ block/
　　　　└ _card.scss
　 　└ element/
　　　　└ _btn.scss
각 문서에는 다음과 같은 기술이 있습니다.
_card.scss

.bl_card {
  display: block;
}

_btn.scss

.el_btn {
  font-size: 16px;
}

index.scss

@import "_modules/block/card";
@import "_modules/element/btn";

'Live Sass Compiler'이 움직이고 있어서 확인index.css했더니 정확한 컴파일링 결과라고 생각했어요.

그리고 이 방법을 참고하여 자신이 좋아하는 방식으로 파일 디자인을 하세요!
최후
기사를 뒤져보니 너무나 당연한 글을 쓴 것 같았다.
다만, 쇼피파이 관리 화면에서 기사로 다룰 수 없고, 쇼피파이를 처음 사용한 사람은 원래 사스를 쓸 수 있었나?잠깐만, 의외로 몇 군데 넘어진 게 있어.
자신의 제작 환경, 디자인이 개발될 수만 있다면 더욱 효율적이고 자유로운 EC 사이트를 만들 수 있다.
같은 일로 괴로워하는 분들을 도울 수 있다면 좋겠네요.
끝까지 읽어주셔서 감사합니다.