如何通过yarn脚本批量编译项目中的所有Sass/SCSS文件？

需不需要逐个编译所有SCSS文件？ #

完全不需要。
首先你项目里_home.scss、_about.scss这种文件名以下划线开头的文件，是Sass设计的局部模块文件（Partials），Sass默认不会把这类文件单独编译成独立CSS文件。这类文件的作用就是拆分样式模块，你只需要在主SCSS文件里引入这些局部文件，最后只编译主入口文件，就能得到包含所有模块样式的完整CSS。
你当前项目里没有下划线前缀的global.scss就适合当主入口，在文件顶部加两行引入代码就行：

// src/styles/global.scss
@use '../pages/home/home';
@use '../pages/about/about';
/* 以下写你原本的全局样式即可 */

引入的时候不用写下划线前缀，也不用加.scss后缀，Sass会自动识别对应的局部文件。

怎么配置Yarn脚本一次性完成编译？ #

第一步：先安装官方Sass编译工具 #

在项目根目录打开终端，执行下面的命令把Sass安装到开发依赖：

yarn add -D sass

第二步：修改package.json里的scripts配置 #

给你两个适配新手的配置方案，选一个就行：

方案1（推荐，最不容易出问题）：单入口编译

就用刚才说的global.scss当唯一入口，所有局部模块都引入到这个文件里，只编译这一个文件，配置如下：

"scripts": {
  "build-sass": "sass src/styles/global.scss:src/styles/global.css --style=compressed",
  "watch-sass": "sass --watch src/styles/global.scss:src/styles/global.css"
}

参数说明：

• --style=compressed：自动压缩编译后的CSS代码，减少文件体积，适合生产环境用
• watch-sass对应的是开发监听模式，启动后只要你修改了任何被引入的SCSS文件（包括_home、_about里的代码），Sass会自动重新编译，不用每次改完手动跑build命令
• 编译完成后你直接在HTML里引入生成的global.css文件就可以用了

方案2：自动扫描全目录编译

如果你不想维护单入口的引入列表，想让Sass自动扫描src目录下所有需要编译的SCSS文件（自动跳过下划线开头的局部模块），可以直接配置目录对目录的编译规则：

"scripts": {
  "build-sass": "sass src/:src/ --no-source-map --style=compressed",
  "watch-sass": "sass --watch src/:src/ --no-source-map"
}

这个配置会把src目录下所有非下划线开头的SCSS文件，编译成同名CSS文件存在和原scss相同的目录下。

新手注意：只要是用来被其他文件引入的模块SCSS，一定要加下划线前缀，不然会被编译出多余的独立CSS文件，造成代码冗余。

运行方式 #

配置完之后，在项目根目录终端执行yarn build-sass就能执行一次性编译，执行yarn watch-sass就能启动开发时的自动监听编译。

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