Shopify 여러 SCSS 파일 문제를 해결하는 간단한 방법

Shopify는 이미 SCS를 사용했지만, 하나만 사용할 수 있습니다.scss 파일, 이것은 스타일을 관리하기 쉬운 독립된 파일로 나눌 기회를 놓쳤다는 것을 의미합니다.
다음은 제가 생각한 간단한 해결 방안입니다.
우리는 여러 개의 scss 파일을 일반 theme.css 파일로 컴파일한 다음 Gulp를 사용하여 이 파일을 theme.scss.liquid 로 이름을 바꿉니다.
Gulp을 사용하여 SCS를 구축하고 서버에 배치하는 두 가지 일을 할 것입니다. (후자는 선택할 수 있습니다. Themekit은 이미 이 점을 해냈습니다.)
나는 gulp-shopify-upload 플러그인을 사용하여 파일을 Shopify 서버로 전송하고 있다https://www.npmjs.com/package/gulp-shopify-upload.
내 gulpfile.js는 이렇게 보인다.

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const gulpShopify = require('gulp-shopify-upload');
const watch = require('gulp-watch');

// Normal .scss compilation.
gulp.task('sass', function(){
  return gulp.src('assets/scss/theme.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'));
});

// Rename css.
gulp.task('rename', function(){
  return gulp.src("css/theme.css")
  .pipe(rename("theme.scss.liquid"))
  .pipe(gulp.dest("assets"));
});

// Compile and rename css.
gulp.task('do-sass', gulp.series('sass', 'rename'));

// Watch files, upload to Shopify server.
gulp.task('shopifywatch', function() {
  gulp.watch('assets/scss/**/*.scss', gulp.series('do-sass'));
  return watch('./+(assets|layout|config|sections|snippets|templates|locales)/**')
.pipe(gulpShopify('API KEY', 'PASSWORD', 'MYSITE.myshopify.com', 'THEME ID'));
});

이렇게Runninggulp shopifywatch은 이제 SCSS 파일을 컴파일하여 일반 파일을 감시하고 모든 내용을 서버에 전송할 수 있습니다.그것은 불평할 수도 있다.scss, 하지만 이것은 경고일 뿐입니다.