위 챗 애플 릿 에서 sass 를 어떻게 즐겁게 사용 하 는 지 상세 하 게 설명 합 니 다.

머리말
위 챗 애플 릿 에서 css 는 wxs 로 표시 되 지만 쓰기 방법 은 기본적으로 일치 합 니 다.주의해 야 할 것 은 wxs 가 두 가지 특성 을 확장 하 였 는데 각각:
사이즈 단위
스타일 가 져 오기
구체 적 으로 참고 할 수 있 습 니 다.
sass 를 편리 하 게 포장 하기 위해 서,우 리 는 gulp 를 사용 하여 우리 의 scss 파일 을 처리 하고,그것 을 wxs 로 변환 합 니 다.
디 렉 터 리 구조
개발 중,우 리 는 일반적으로 src 소스 코드 디 렉 터 리 를 가지 고 있 으 며,dist 디 렉 터 리 는 우리 가 포장 한 코드 를 출력 하 는 데 사용 된다.이번 설명 에 사 용 된 디 렉 터 리 구 조 는 다음 과 같다.

build 디 렉 터 리 는 우리 의 포장 인 자 를 설정 하 는 데 사 용 됩 니 다.현재 config.js 파일 만 있 습 니 다

dist 디 렉 터 리 는 압축 출력 디 렉 터 리 이자 애플 릿 이 실행 하 는 디 렉 터 리 입 니 다

gulpfile.js 설정 패키지 작업

src 가 바로 우리 의 소스 코드 디 렉 터 리 입 니 다src 의 디 렉 터 리 구 조 는 다음 과 같다.

설치 의존

yarn add gulp gulp-sass gulp-rename gulp-replace gulp-tap gulp-clean -D

gulp 와 gulp-ass 는 sass 를 포장 하 는 데 필수 적 이 며,gulp-rename 은 scss 접 두 사 를 wxs 로 바 꾸 고,gulp-replace 는 내용 의 교체(이 뒤에 설명 할 것)를 책임 집 니 다.gulp-tap 는 현재 실행 중인 파일 을 처리 하고,gulp-clean 은 우리 가 필요 로 하지 않 는 파일 을 제거 합 니 다.
sass 패키지 설정
gulp 설정 패키지 sas 는 매우 간단 합 니 다.코드 는 다음 과 같 습 니 다.

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');

gulp.task('sass', () => gulp.src('./src/**/*.{scss,wxss}')
  .pipe(sass().on('error', sass.logError))
  .pipe(rename({
    extname: '.wxss'
  }))
  .pipe(gulp.dest('./dist'))
);

이렇게 하면 sas 의 설정 을 완성 할 수 있 지만,이렇게 하면 문제 가 생 길 수 있 습 니 다.앞에서 말 했 듯 이 wxs 는 스타일 가 져 오 기 를 지원 합 니 다.즉,import 문법 wxs 는 지원 하지만 css 는 지원 하지 않 습 니 다.따라서 sass 포장 은 import 파일 을 현재 파일 로 포장 하여 현재 파일 의 부피 가 커 집 니 다.위 챗 은 패키지 코드 가 2M 을 초과 할 수 없 도록 제한 하기 때문에 css 가 많이 쓸 수록 이러한 포장 방식 은 스타일 파일 을 더욱 크게 만 들 것 입 니 다.
import 가 져 오기 문제 해결
import 의 가 져 오기 문 제 를 어떻게 해결 합 니까?사실 비교적 간단 합 니 다.말하자면 sass 가 처리 할 때 import 부분의 문 구 를 처리 하지 않 게 하면 됩 니 다.두 가지 방법 으로 할 수 있 습 니 다.첫 번 째 는 sas 처리 소스 코드 를 바 꾸 는 것 입 니 다.import 문 구 를 만 났 을 때 건 너 뛰 는 것 입 니 다.두 번 째 는 파일 을 sass 처리 에 맡 기기 전에 우 리 는 먼저 import 문장 부분 에 주석 을 달 면 sass 처리 할 때 무시 합 니 다.sass 처리 가 끝 난 후에 주석 이 떨 어 진 문 구 를 열 면 됩 니 다.분명히 첫 번 째 원가 가 비교적 높 고 유지 하기 도 어렵다.우 리 는 두 번 째 종 류 를 사용 합 니 다.코드 는 다음 과 같 습 니 다.

const gulp = require('gulp');
const sass = require('gulp-sass');
const replace = require('gulp-replace');
const rename = require('gulp-rename');
const clean = require('gulp-clean');
const tap = require('gulp-tap');
const path = require('path');

const config = require('./build/config');

const hasRmCssFiles = new Set();
gulp.task('sass', () => gulp.src('./src/**/*.{scss,wxss}')
  .pipe(tap((file) => {
    //          
    const filePath = path.dirname(file.path);
    //       
    const content = file.contents.toString();
    //   filter scss，           
    content.replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => {
      const hasFilter = config.cssFilterFiles.filter(item => $2.indexOf(item) > -1);
      // hasFilter > 0  filter         ，         
      if (hasFilter.length > 0) {
        const rmPath = path.join(filePath, $2);
        //  src  dist，.scss  .wxss，  ：'/xxx/src/scss/const.scss' => '/xxx/dist/scss/const.wxss'
        const filea = rmPath.replace(/src/, 'dist').replace(/\.scss/, '.wxss');
        //        
        hasRmCssFiles.add(filea);
      }
    });
    console.log('rm', hasRmCssFiles);
  }))
  .pipe(replace(/(@import.+;)/g, ($1, $2) => {
    const hasFilter = config.cssFilterFiles.filter(item => $1.indexOf(item) > -1);
    if (hasFilter.length > 0) {
      return $2;
    }
    return `/** ${$2} **/`;
  }))
  .pipe(sass().on('error', sass.logError))
  .pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => $3.replace(/\.scss/g, '.wxss')))
  .pipe(rename({
    extname: '.wxss',
  }))
  .pipe(gulp.dest('./dist')));

import 를 처리 할 때 주의해 야 할 부분 이 있 습 니 다.sass 에서 import 는 css 를 도입 할 수 있 을 뿐만 아니 라 변수,함수 도 도입 할 수 있 습 니 다.따라서 저 희 는 처리 할 때 도 구분 에 주의해 야 합 니 다.변수 와 함 수 는 독립 된 파일 디 렉 터 리 에 저장 하 는 것 이 좋 습 니 다.또한 import 할 때 변수 와 함수 에 대해 서 는 반드시 sass 에 맡 겨 야 합 니 다.즉,주석 을 달 수 없습니다.따라서 위의 코드 에서 볼 수 있 듯 이 우 리 는 build 디 렉 터 리 에 있 는 config 를 도 입 했 습 니 다.이 는 sas 변수 와 함수 가 저 장 된 위 치 를 설정 합 니 다.그러면 우 리 는 포장 할 때 이러한 import 문 구 를 만 났 을 때 건 너 뛰 고 sas 처리 에 맡 깁 니 다.그렇지 않 으 면 공용 스타일 파일 을 도입 한 것 을 의미 합 니 다.이렇게 해서 우 리 는 sas 처리 전에 맡 깁 니 다.먼저 주석 을 지우 고,sas 처리 가 끝 난 후에 주석 을 엽 니 다.또한 import 는 scss 파일 일 수 있 지만 wxs 로 전 환 될 때 접 두 사 를 wxs 로 바 꾸 었 기 때문에 주석 을 열 때 도 해당 하 는 도입 을 변경 해 야 합 니 다.이것 이 바로 gulp-replace 패키지 의 역할 입 니 다.config 설정 은 다음 과 같 습 니 다:

module.exports = {
  cssFilterFiles: ['scss/var.scss'],
};

쓸모없는 wxss 파일 정리
앞에서 말 했 듯 이 우 리 는 sas 에서 일부 변수,함 수 를 정의 할 수 있 습 니 다.이 파일 들 은 잠시 후에 dist 디 렉 터 리 에 포장 되 지만 그 내용 이 비어 있 습 니 다.이 럴 때 우 리 는 이 변 수 를 정리 해 야 합 니 다.앞에서 포장 하 는 과정 에서 우 리 는 set 변수 가 있 습 니 다hasRmCssFiles해당 하 는 파일 을 기록 하면 우 리 는 이 변 수 를 옮 겨 다 니 며 해당 하 는 파일 을 삭제 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

gulp.task('clean:wxss', () => {
  const arr = [];
  hasRmCssFiles.forEach((item) => {
    arr.push(item);
  });
  return gulp.src(arr, { read: false })
    .pipe(clean({ force: true }));
});

총결산
wxss 의 특성
sass 포장 설정 및 import 문 구 를 어떻게 처리 하 는 지sass 변수,함수 의 파일 정리
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.