WeChat 애플릿이 없는 파일을 wxss 파일로 컴파일하는 구현

이 글에서는 WeChat 애플릿 wxss 파일로 WeChat 애플릿 less 파일을 컴파일하는 방법에 대한 관련 정보를 주로 소개합니다. 구체적인 구현 방법은 여기에 나와 있습니다. 필요한 친구는 이를 참조할 수 있습니다.

less 파일은 WeChat 애플릿으로 컴파일됩니다. wxss 파일

2016년 9월 21일, WeChat 미니 프로그램이 공식적으로 내부 테스트를 시작했습니다. 위챗 생태계에서는 쉽게 접근할 수 있고 즉시 사용할 수 있는 위챗 미니 프로그램이 널리 주목을 받고 친구 범위가 확대되었습니다. 이렇게 뜨거운 분위기 속에서 나 역시 프론트엔드 개발자로서 조용히 새로운 일을 시도하고 있다.

작은 데모 예제를 만드는 과정에서 매우 당황스러운 점을 발견했습니다: **소형 ​​프로그램용 less/sass 파일을 wxss 파일로 변환하는 방법**.

기본적으로 기본 CSS를 사용하지 않고 글을 적게 쓰는 데 익숙한 저에게는 이것이 제 스타일의 글쓰기를 상당히 어렵게 만듭니다.

koala(less/sass를 컴파일할 수 있는 도구)를 구성하고 다양한 정보를 검색한 끝에 마침내 실현 가능한 방법을 찾았습니다. 나는 당신과 공유하기 위해 예를 들어 덜을 사용하겠습니다. 사스도 가능합니다.

환경 요구사항:

- webstrom
- nodejs

특정 단계

1 nodejs 명령을 사용하여 less를 설치하세요.

nodejs 명령 창에서 npm install less -g를 입력한 다음 Enter를 눌러 설치합니다. 아래와 같이:

2. webstrom 구성

1) webstrom 설정, 파일 —> 설정을 엽니다.

2) 왼쪽 목록의 마지막 항목을 확장하고 파일 감시자를 찾습니다. 오른쪽에 있는 흰색 상자를 볼 수 있습니다. 그런 다음 추가 아이콘을 클릭하고 Less를 선택합니다. 그림에 표시된 대로:

3) 열린 상자에서 몇 가지 관련 구성을 볼 수 있습니다. 다른 것에 대해서는 걱정할 필요가 없습니다. 프로그램 경로와 출력 경로 두 곳에만 주의하면 됩니다. 프로그램 경로는 앞서 설치한 less 경로입니다. 출력 경로를 수정하고 원래 기본 .css를 .wxss로 변경합니다. 아래와 같이

4) 저장하고 확인하세요.

3. 확인

1) 적용 여부를 에디터에서 확인합니다. 더 적은 파일을 추가하면 편집기가 해당 wxss 파일을 자동으로 추가하는 것을 볼 수 있습니다.

2) less 파일을 작성하고 저장한 다음 wxss 파일을 열고 컴파일이 성공한 것을 확인하면 완료됩니다.

기다립니다! 우리 wxss가 정말 끔찍한 것 같아요!

당황하지 마세요. 해결책이 있습니다.

1) webstrom의 설정을 열고 편집기에서 파일 anb 코드 템플릿을 찾으세요.

2). 아이콘 추가 및 확장명 추가 입력란에 wxss를 입력하고 적용을 클릭합니다.

3) 팝업 파일 형식 상자에서 css를 선택합니다.

4) wxss를 열고 CSS와 동일한지 확인하세요.

여기에서는 Less를 예로 들었습니다. Sass도 비슷합니다. 필요하면 직접 하셔도 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 애플릿에서 여러 사진 업로드 기능 구현

WeChat 애플릿 글로벌 개발 구성 소개

위 내용은 WeChat 애플릿이 없는 파일을 wxss 파일로 컴파일하는 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!