通过 @import 或构建工具连接 scss 文件答案

【问题标题】：Concat scss files via @import or via build tool通过 @import 或构建工具连接 scss 文件
【发布时间】：2019-09-18 21:08:19
【问题描述】：

我知道连接/合并 scss 文件的不同方法。

每个都通过一个任务运行器，例如在gulp 中（这在grunt 或webpack 中应该类似）

// gulpfile.js
gulp.src([
    "./assets/scss/var.scss",
    "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "./node_modules/bootstrap/scss/bootstrap.scss",
    "./assets/scss/frontend/nav.scss",
    "./assets/scss/frontend/footer.scss"
])

每个都通过@import在一个scss文件中：

// assets/scss/frontend.scss
@import 'var.scss'
@import "~bootstrap/scss/bootstrap"
@import "~@fortawesome/fontawesome-free/scss/fontawesome"
@import 'frontend/nav'
@import 'frontend/footer'

// gulpfile.js
gulp.src("./assets/scss/frontend.scss")

这两种方式的优缺点是什么？

【问题讨论】：

标签： webpack sass gulp gruntjs

【解决方案1】：

第一个示例：假设您有一个样式表 (utils.scss)，nav.scss 和 footer.scss 都依赖它。如果您只将一个文件传递给 gulp，那么导入指令将被解析，并且样式将以正确的顺序导入。另一方面，如果你要将多个文件传递给 gulp，你需要自己管理文件的顺序。

第二个例子：假设只有footer.scss 依赖于utils.scss。出于某种原因，您决定从 gulp 构建中删除页脚样式。如果您使用 SASS @import 指令添加 utils.scss，它将自动从构建中排除，但如果您将所有样式传递给 Gulp，则需要手动删除 footer.scss 和 utils.scss。

所以我认为使用@import 指令的第二种方法要好得多。

【讨论】：