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

Question

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

"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"

我是否可以通过我的脚本来执行此操作？我无法在文档中找到任何相关内容。

提前致谢。

Answer 1

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

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

find src/scss -name '*.scss' -exec sh -c 'node-sass [=12=] dist/css/$(basename [=12=] .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"