是否有一种简单的方法可以将原始SCSS文件组合为基于@imports的单个文件？

Question

不幸的是，Shopify不完全支持@imports。

是否有一种简单的方法（使用Webpack或类似工具）将所有@import文件串联/组合到单个SCSS文件中而无需处理？

即，通过循环所有@import并输出单个文件。

Answer 1

是的，我使用gulp和gulp-scss-combine包来做到这一点：

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