使用npm sass编译多SCSS文件时添加.min后缀及生成未压缩文件

你可以通过拆分两个sass命令来实现需求，分别生成未压缩版和带.min后缀的压缩版，具体调整package.json的scripts如下：

"scripts": {
  "build:sass": "sass --style=expanded website/assets/scss:website/assets/css && sass --style=compressed website/assets/scss/**/*.scss website/assets/css/[path][name].min.css"
}

命令说明： #

• 第一部分 sass --style=expanded website/assets/scss:website/assets/css
  • --style=expanded：生成未压缩、格式清晰的CSS文件，输出到website/assets/css目录，文件名和原SCSS文件一致（不带.min后缀）。
• 第二部分 sass --style=compressed website/assets/scss/**/*.scss website/assets/css/[path][name].min.css
  • --style=compressed：生成压缩后的CSS文件；
  • **/*.scss：匹配SCSS目录下所有子目录中的SCSS文件；
  • [path][name].min.css：占位符用法，[path]保留原文件的子目录结构，[name]替换为原SCSS文件名（不带后缀），最终生成文件名.min.css格式的压缩文件。

如果需要分开执行两个步骤，也可以拆成单独的脚本：

"scripts": {
  "sass:unminified": "sass --style=expanded website/assets/scss:website/assets/css",
  "sass:minified": "sass --style=compressed website/assets/scss/**/*.scss website/assets/css/[path][name].min.css",
  "build:sass": "npm run sass:unminified && npm run sass:minified"
}

执行时只需运行npm run build:sass即可同时生成两种格式的CSS文件。

内容的提问来源于stack exchange，提问作者alexkodr