有没有一种简单的方法可以基于@imports 将原始 SCSS 文件组合成一个文件？答案

【问题标题】：Is there an easy way to combine raw SCSS files into a single file based on @imports?有没有一种简单的方法可以基于@imports 将原始 SCSS 文件组合成一个文件？
【发布时间】：2019-06-17 16:59:03
【问题描述】：

遗憾的是，Shopify 并不完全支持 @imports。

是否有一种简单的方法（使用 Webpack 或类似方法）将所有 @import 文件连接/组合成一个 SCSS 文件而不进行处理？

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

【问题讨论】：

为什么不生成自己的终极 css 文件。似乎如果您已经掌握了 SCSS 并在本地大量导入，那么您就可以将这些资产用于生产用途。
您是否在您的网站上处理您的 SCSS 文件？这应该在 localhost 上完成，然后只有 CSS 文件发送到网络
我想在 Shopify 上使用 SCSS，因为我需要在样式表中使用液体进行设置。因此，我需要在本地将所有 Bootstrap 文件连接/组合成一个 SCSS 文件，以便在 Shopify 上使用，Shopify 会将其编译为 CSS，然后再提供给网站。我已经使用 Webpack 完成了这项工作，它循环并基于 @imports 进行编译——但它有点难看，我想知道是否有更简单的方法。

标签： webpack sass gulp shopify

【解决方案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

【讨论】：