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

Posted 2021-04-15

我知道以不同方式连接/组合scss文件。

1. 每个通过任务运行器，例如在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" ])
2. 每个通过一个scss文件中的@import： // 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")

这两种方式有哪些优缺点？

答案

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

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

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