如何将多个SASS文件编译为单个CSS文件？node-sass配置疑问

嘿，我来帮你搞定这个node-sass编译的问题～

你的脚本哪里出问题了？ #

你当前的npm脚本 "scss": "node-sass -o css css -w" 之所以会生成多个CSS文件，核心原因是你把整个css目录作为了node-sass的输入源。当node-sass接收到一个目录作为输入时，它会遍历目录下所有的.scss文件，对每个文件单独编译输出——这就导致每个scss文件都对应生成了一个CSS文件，完全不是你想要的合并效果。

怎么实现合并成单个CSS文件？ #

要合并所有scss到一个CSS文件，关键是用单个入口scss文件来整合所有依赖，然后只编译这个入口文件就行，具体步骤如下：

1. 创建入口scss文件

在你的css目录下新建一个入口文件（比如main.scss），然后在这个文件里用@import导入所有你需要的scss文件。举个例子：

// css/main.scss
// 按依赖顺序导入，比如变量文件要先导入
@import './variables.scss';
@import './mixins.scss';
// 然后是组件、布局等文件
@import './components/button.scss';
@import './layouts/header.scss';
// 把所有需要合并的scss都在这里导入

2. 修改npm脚本

把原来的脚本改成编译这个单个入口文件，直接输出到目标CSS文件：

"scss": "node-sass css/main.scss css/main.css -w"

这里的参数含义：

• css/main.scss：指定要编译的入口scss文件
• css/main.css：指定最终输出的单个CSS文件路径
• -w：保持监听模式，当任何scss文件修改时自动重新编译

额外优化（可选）

如果你希望输出压缩后的CSS文件，可以加上--output-style compressed参数：

"scss": "node-sass --output-style compressed css/main.scss css/main.css -w"

内容的提问来源于stack exchange，提问作者João Santos