Sass多页面样式配置问题：独立编译与公共样式复用

一、为每个页面单独配置Sass入口文件 #

完全可以为每个页面单独设置Sass入口文件，修改package.json中的watch:sass命令即可：

• 原命令：

  "watch:sass": "node-sass sass/main.scss css/style.css"
  

• 修改后（支持多文件监听编译）：

  "watch:sass": "node-sass --watch sass/main.scss:css/style.css sass/main2.scss:css/style2.css"
  

  注意必须加上--watch参数才能持续监听文件变化，同时用空格分隔多组「源文件:输出文件」的对应关系。

二、复用公共样式（页眉、页脚等） #

通过Sass的局部文件功能实现公共样式复用：

1. 在sass目录下创建_common.scss（文件名开头加下划线，标识为局部文件，不会被单独编译）
2. 在_common.scss中编写页眉、页脚等公共样式
3. 在每个页面的入口SCSS文件（main.scss、main2.scss）中导入这个局部文件：

   @import 'common'; // 无需加下划线和.scss后缀
   

   这样两个页面都会包含公共样式，无需重复编写代码。

三、解决第二个SCSS文件无法生效的问题 #

针对你修改命令后第二个文件不生效的情况，可从以下几点排查：

• 核对文件路径：确认sass/main2.scss真实存在，且输出目录css已创建，css/style2.css的路径无误
• 检查node-sass版本：部分旧版本对多文件监听支持有问题，可尝试更新到稳定版本
• 拆分监听命令：如果多文件监听不生效，可拆分成两个独立脚本，在不同终端窗口执行：

  "watch:sass1": "node-sass --watch sass/main.scss css/style.css",
  "watch:sass2": "node-sass --watch sass/main2.scss css/style2.css"
  

• 验证页面引入：确认第二个页面的<link>标签正确指向css/style2.css，路径没有错误

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