多目录多SCSS文件合并为单CSS的node-sass配置求助

嘿，我来帮你搞定这个SCSS编译的问题！你的需求其实很明确：把分散在static目录和各个组件里的SCSS合并成单个压缩后的CSS文件，还要让static里的variables全局可用，不用每个组件手动写导入路径，后续新增组件也不用改配置。之前的命令没达到效果，是因为node-sass处理多目录输入的逻辑和你想的不一样——它会把每个目录下的文件单独编译，而不是合并。

下面是具体的解决方案：

1. 创建一个主入口SCSS文件 #

在my/static/styles目录下新建一个main.scss，作为所有SCSS代码的整合入口。内容如下：

// 先导入全局变量文件，后续配置搜索路径后直接写文件名即可
@import 'variables';

// 用通配符递归导入所有组件的SCSS文件
// 路径根据你的目录结构调整，**表示遍历components下的所有子目录
@import '../../components/**/*.scss';

2. 调整node-sass编译脚本 #

把原来package.json里的scss脚本改成编译这个入口文件，同时加上--include-path参数，让所有SCSS文件都能直接引用static/styles下的文件（比如variables），不用写复杂的相对路径：

"scss": "node-sass --watch my/static/styles/main.scss output/styles/main.css --output-style compressed --include-path my/static/styles"

3. 组件内无需手动导入variables #

现在有两个保障让你不用在组件里重复导入variables：

• 入口文件已经全局导入了variables，所有组件的SCSS都是通过入口文件整合编译的，变量会自动生效
• --include-path把my/static/styles加入了SCSS的搜索路径，就算某个组件需要单独导入（比如特殊场景），直接写@import 'variables'就行，不用写冗长的相对路径

为什么之前的命令失效？ #

当你给node-sass传入多个输入目录（./my/static/styles和./my/components）时，它的逻辑是分别编译每个目录下的SCSS文件，把每个文件单独输出到output/styles目录里，而不是把所有文件合并成一个。所以必须通过一个入口文件来主动整合所有需要编译的SCSS代码。

新增组件的自动识别 #

以后新增组件时，只要把组件的SCSS文件放在components目录（或它的任意子目录）下，main.scss里的通配符@import '../../components/**/*.scss'会自动识别并导入这些文件，完全不需要修改编译脚本或入口文件。

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