서문
위챗 애플릿에서 CSS는 wxss로 표현되지만 작성 방법은 기본적으로 동일합니다. wxss는 다음과 같은 두 가지 기능을 확장했습니다.
크기 단위
스타일 가져오기
자세한 내용은 wxss를 참조하세요. 여기서 너무 많이 들어갑니다.
Sass 패키징을 용이하게 하기 위해 gulp를 사용하여 scss 파일을 처리하고 wxss로 변환합니다.
디렉터리 구조
개발 중에는 일반적으로 패키지 코드를 출력하기 위한 src 소스 코드 디렉토리와 dist 디렉토리가 있습니다. 이 설명에 사용된 디렉터리 구조는 다음과 같습니다:
빌드 디렉터리는 패키징 매개변수를 구성하는 데 사용됩니다. 현재 여기에는 config.js 파일이 하나만 있습니다.
dist 디렉터리입니다. 는 패키징 출력을 위한 디렉터리이며 미니 프로그램이 실행되는 디렉터리이기도 합니다.
Gulpfile.js는 패키징 작업을 구성합니다.
src는 소스 코드 디렉터리입니다
src의 디렉토리 구조는 다음과 같습니다:
p>종속성 설치
yarn add gulp gulp-sass gulp-rename gulp-replace gulp-tap gulp-clean -D
gulp 및 gulp-sass는 sass 패키징에 필요하고, gulp-rename은 scss 접미사를 wxss로 변경하는 작업을 담당하고, gulp-replace는 콘텐츠 교체를 담당하고(이에 대해서는 나중에 설명함), gulp-tap은 현재 실행되는 파일을 처리하는 데 사용되며, gulp-clean은 필요하지 않은 파일을 삭제하는 역할을 합니다.
Sass 패키징 구성
Sass를 패키징하기 위한 Gulp 구성은 매우 간단하며 코드는 다음과 같습니다:
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'))
);
이렇게 하면 sass 구성이 완료되지만 문제가 발생합니다. 앞서 언급했듯이 wxss는 스타일 가져오기를 지원합니다. 즉, 가져오기 구문 wxss는 지원하지만 CSS는 지원하지 않으므로 sass 패키징은 가져온 파일을 현재 파일로 패키징하므로 현재 파일의 크기가 더 커집니다. WeChat은 단일 코드 패키지를 2M 이하로 제한하므로 CSS가 점점 더 많이 작성되면 이 패키징 방법으로 인해 스타일 파일이 점점 더 커지게 됩니다.
가져오기 문제 해결
그럼 어떻게 가져오기 문제를 해결할 수 있을까요? 사실 비교적 간단합니다. 직설적으로 말하면 Sass가 처리 중일 때는 그냥 처리하지 마세요. 문의 부분을 가져옵니다. 이를 수행하는 방법에는 두 가지가 있습니다. 첫 번째는 Sass 처리의 소스 코드를 다시 작성하고 import 문을 발견하면 건너뛰는 것입니다. 두 번째는 처리를 위해 파일을 sass에 전달하기 전에 먼저 import 문을 주석 처리하여 sass 처리가 완료되면 주석 처리된 문을 열 수 있다는 것입니다. 분명히 첫 번째 유형은 더 비싸고 유지 관리가 어렵습니다.
우리는 두 번째 것을 사용하는데, 코드는 다음과 같습니다:
const gulp = require('gulp');
const sass = require('gulp-sass');
const 교체 = 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) => {
// 현재 처리 중인 경로 file
const filePath = path.dirname(file.path);
// 현재 콘텐츠 처리 중
const content = file.contents.toString();
// 필터의 scss를 찾아 구성 파일에 있는지 여부를 일치시킵니다.
content.replace(/@import\s+['|"](.+)[ '|"];/g, ($1, $2) => {
const hasFilter = config.cssFilterFiles.filter(item => $2.indexOf(item) > -1);
// hasFilter > 0 필터를 나타내는 파일은 구성 파일에 있으며 패키징이 완료된 후 삭제해야 합니다.
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) {
$2 반환;
}
반환 `/** ${$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에서는 CSS를 가져오는 것 외에도 변수와 함수를 가져올 수도 있습니다. 따라서 처리 시에도 구별에 주의할 필요가 있습니다. 변수와 함수를 독립된 파일 디렉터리에 저장하는 것이 가장 좋습니다. 가져올 때 변수와 함수는 처리를 위해 Sass에 넘겨야 합니다. 즉, 주석 처리가 불가능합니다. 밖으로. 따라서 위의 코드에서는 sass 변수 및 함수의 저장 위치를 구성하는 config를 빌드 디렉터리에 도입하여 패키징할 때 이러한 import 문을 만나면 점프한 다음 떠나는 것을 볼 수 있습니다. 그렇지 않으면 특별한 스타일 파일을 도입했다는 의미이므로 처리를 위해 sass에 넘기기 전에 먼저 주석 처리한 다음 sass 처리가 완료된 후 주석을 엽니다. 또한 import는 scss 파일일 수도 있는데 wxss로 변환하면 접미사가 wxss로 변경되므로 Annotation을 열 때 해당 import도 변경해야 합니다. 패키지를 교체하십시오. 구성 구성은 다음과 같습니다:
module.exports = {
cssFilterFiles: ['scss/var.scss'],
};
쓸모없는 wxss 파일 정리
앞서 언급했듯이 sass에서 일부 변수와 함수를 정의할 수 있습니다. 이러한 파일은 나중에 dist 디렉터리에 패키징되지만 현재는 내용이 비어 있습니다. time 패키징 과정에서 해당 파일을 기록하기 위해 hasRmCssFiles 변수를 설정했기 때문에 이 변수를 순회하여 해당 파일을 삭제할 수 있습니다.
gulp.task('clean:wxss', () => {
const arr = [];
hasRmCssFiles.forEach((item) => {
arr.push(item);
});
return gulp.src(arr, { 읽기: false })
.pipe( clean({ force: true }));
});
요약
wxss의 기능
Sass 패키징 구성 및 방법 import 문을 처리하기 위해
sass 변수 및 함수의 파일 정리