如何让SASS监听主CSS文件夹外的文件变化？

问题原因 #

默认情况下，sass --watch只会监听入口文件所在目录及其子目录内的依赖文件变化。你的组件Sass文件放在主Sass目录外的src/components下，Sass无法自动感知到这些外部路径的文件修改，因此不会触发重新编译。

解决方案 #

方案1：扩展监听范围，直接添加组件目录到watch命令 #

修改监听命令，把组件目录也纳入监听目标：

sass --watch src/assets/css/sass/style.scss:src/assets/css/style.css src/components/

这条命令会同时监听主样式文件和src/components目录下的所有文件变化，只要组件内的Sass文件被修改，就会触发重新编译。

方案2：使用加载路径（--load-path）简化导入并自动追踪依赖 #

通过--load-path参数告诉Sass去哪里查找外部依赖文件，同时让它自动追踪这些依赖的变化：

1. 修改监听命令：

sass --watch --load-path=src/components src/assets/css/sass/style.scss:src/assets/css/style.css

2. 简化style.scss中的导入语句（无需再写冗长的相对路径）：

@use 'component_1/sass/index' as cp1;
@use 'component_2/sass/index' as cp2;

这种方式更优雅，Sass会自动从指定的加载路径中查找文件，并且在watch时自动追踪所有依赖文件的变化，无需额外配置监听目录。

额外说明 #

你的组件Sass文件命名为_index.scss，使用@use 'index'的写法是正确的——Sass会自动识别下划线开头的局部文件，不需要在导入时写下划线。

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