Есть ли простой способ объединить необработанные файлы SCSS в один файл на основе @imports?

Question

Shopify, к сожалению, не полностью поддерживает @imports.

Есть ли простой способ - с помощью Webpack или аналогичного - объединить / объединить все файлы @import в один файл SCSS без обработки?

Т.е., перебирая все @imports и выводя один файл.

Answer 1

Да, я делаю это, используя gulp и пакет gulp-scss-объединить:

https://www.npmjs.com/package/gulp-scss-combine

Например,

function styles() {
  return gulp.src("styles.scss")
    .pipe(combine())
    .pipe(concat('styles.scss.liquid'))
    .pipe(gulp.dest(assets))
}

styles.scss имеет всеправила импорта, например

@import "partials/header";
@import "partials/main";
@import "partials/footer";

структура файла выглядит следующим образом

/assets
  styles.scss
  styles.scss.liquid
  /partials
    _header.scss.liquid
    _main.scss.liquid
    _footer.scss.liquid