编译 watch SCSS 多对一 CSS

Question

我正在尝试找到一种方法将我的多个 scss 文件编译成一个 css 文件。

脚本在 package.json 中使用 node-sass

目前我发现的最好的是：sass --watch .assets/css/scss/:assets/css

问题是它为每个 scss 文件和一个 css 映射文件创建一个 css 文件。 我以前在没有手表node-sass --include-path scss .assets/css/scss/style.scss assets/css/style.css 的情况下工作，但每次保存时都必须运行该命令。

像这样使用sass --watch .assets/css/scss/style.scss:assets/css/style.css 和 style.scss：

@import 'test1.scss'; @import 'test2.scss'

不工作，但控制台说：

将 style.scss 编译为 style.css。 将test1.scss编译成test1.css

我错过了什么吗？

编辑：由于某些原因，在子系统 linux 上只运行没有节点的 sass 会导致一些蓝屏。使用 node-sass --watch ./assets/css/scss/style.scss:assets/css/style.css 或 node-sass --watch ./assets/css/scss:assets/css 返回 npm 错误：code ELIFECYCLE errno 1

Answer 1

我尝试了不同的解决方案，其中一个适合我想要的解决方案是：Using node sass watch with npm

删除依赖项和目录，因为我只需要写一个文件。

必须运行这个才能使其工作

"css-watch: node-sass --include-path scss ./assets/css/scss/style.scss -w /assets/css/style.css"

在 style.scss 中包含名称中不带 _ 的文件可以通过简单的导入正常工作，并检测导入文件中的所有更新。

Answer 2

您的所有 SASS 部分都应重命名为以下划线字符开头：_。

来自SASS Basics 指南：

partial 是一个以下划线开头的 Sass 文件。您可以将其命名为 _partial.scss。下划线让 Sass 知道该文件只是部分文件，不应将其生成为 CSS 文件。

您可以继续以相同的方式将部分文件导入主 styles.scss 文件，使用它们的正常名称并省略下划线字符。如果您愿意，也可以省略“.scss”。要遵循新的 SASS 语法版本，您应该使用 @use 到 import partial SASS files as a module，而不是 @import。

然后您只需转换该主构建文件，它应该可以正常工作。