Question

我知道以多种方式合并/组合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")

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

Answer 1

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

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

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

通过@import或通过构建工具Concat scss文件

1 个答案: