使用 node-sass 监视整个目录时指定输出文件名

Posted 2023-02-21

【中文标题】使用 node-sass 监视整个目录时指定输出文件名

【英文标题】：Specify output file names when watching a whole directory with node-sass

【发布时间】：2020-08-03 17:55:30

【问题描述】：

目前，我可以在查看单个 SCSS 文件时指定文件名，在我的 package.json 文件中使用 node-sass build 命令：

"sass-build": "node-sass src/scss/main.scss dist/css/main.min.css --output-style compressed"

但是，我需要查看整个目录，因为我正在构建多个文件。是否可以使用 node-sass 监视整个目录并操作单个文件的名称？

我需要更改以下文件名：

main.scss --> main.min.css

other.scss --> other.min.css

这些文件位于同一目录中，因此我的构建脚本现在如下所示：

"sass-build": "node-sass src/scss -o dist/css --output-style compressed"

是否有一个参数我可以传递我的脚本以便这样做？我无法在文档中找到任何相关内容。

提前致谢。

【问题讨论】：

我认为您应该将 gulp 与 gulp-sass 一起使用，它为您提供了更多功能和一种查看目录和指定输出文件名的简便方法。

有趣的是 Dart Sass CLI 是否可以做到这一点，因为它现在是 Sass 的主要风格。不过，我还不能这样做。

【参考方案1】：

您需要的功能似乎不作为 node-sass cli 的内置存在。

假设您使用 bash，这可能对您有用。

find src/scss -name '*.scss' -exec sh -c 'node-sass $0 dist/css/$(basename $0 .scss).min.css --output-style compressed' \;

它是如何工作的

此脚本的作用是获取文件夹树中每个文件的相对路径，其文件名与模式“*.scss”匹配，并针对每个路径执行专门针对该文件的 node-sass 命令，定义输出通过删除“.scss”初始扩展名并根据需要将其替换为“.min.css”扩展名。

例如，假设您在 src/scss/ 文件夹中

myfile1.scss 子文件夹/ myfile2.scss

这将执行：

node-sass src/scss/myfile1.scss dist/css/myfile1.min.css --output-style compressed 
node-sass src/scss/subfolder/myfile2.scss dist/css/myfile2.min.css --output-style compressed 

可选

你可以把这个脚本放在一个文件./bin/scss-watcher.sh中，使其可执行，直接调用它来包装逻辑。

"sass-build" : "./bin/scss-watcher.sh"