如何用package.json脚本将同目录多SCSS文件编译为同名CSS文件？

你写的这个build-sass脚本不可行。

原因很直接：当你用sass src/style/*.scss ./src/style/*.css这种写法时，Sass会把所有匹配到的SCSS文件合并输出到一个名为*.css的文件里，而不是给每个SCSS文件单独生成同名的CSS文件，完全达不到你想要的效果。

给你两种正确的实现方式：

• 基础写法：直接利用Sass的目录映射语法
  修改脚本为：

  "scripts": {
    "build-sass": "sass src/style/:src/style/"
  }
  

  这个语法的作用是把src/style/目录下的所有SCSS文件，编译到同目录下同名的CSS文件，默认情况下会自动生成对应的source map文件。

• 带参数控制的写法：如果需要显式指定生成source map（避免环境差异），可以加上--source-map选项：

  "scripts": {
    "build-sass": "sass --source-map src/style/:src/style/"
  }
  

执行npm run build-sass之后，就能得到你期望的目录结构：每个SCSS文件对应生成同名的CSS和map文件。

内容的提问来源于stack exchange，提问作者A-Z