如何阻止Sass编译局部文件？Mac下VS Code环境实现方案

我之前也碰到过完全一样的困扰——拆分SCSS局部文件后，满目录的冗余.css和.map文件看着太闹心了，刚好你用的VS Code + Sass Watcher插件完全能搞定这个需求，和Bootstrap的整洁结构对齐，步骤很清晰：

第一步：给局部文件加上下划线前缀 #

Sass本身就有「局部文件（partials）」的机制，只要把你的局部文件命名改成下划线开头（比如_variables.scss、_components.scss），Sass就会默认识别这些文件是用来被主文件引入的，不会单独编译它们。这是实现的基础，和Bootstrap的命名规则保持一致就对了。

第二步：配置Sass Watcher插件，忽略局部文件 #

打开VS Code的设置（快捷键Cmd+,），搜索「Sass Watcher」找到插件的配置项，重点调整两个设置：

• 找到「Exclude Files」（排除文件）选项，添加匹配规则：**/_*.scss，这样插件就会自动跳过所有下划线开头的局部文件，不会对它们执行编译。
• 确保你的主SCSS文件（比如main.scss）不要加下划线，并且在主文件里用@use（推荐）或者@import引入所有局部文件，比如：

@use './partials/_variables';
@use './partials/_buttons';

第三步：重启Sass Watcher验证 #

配置保存后，在VS Code状态栏找到Sass Watcher的图标，右键选择「Stop Watching」再重新「Start Watching」。之后你编辑任何局部文件并保存，插件只会重新编译你的主SCSS文件，再也不会生成那些多余的.css和.map文件了。

小提示 #

如果之前已经生成了冗余的.css/.map文件，直接批量删掉就行，之后不会再自动生成啦。另外新版Dart Sass更推荐用@use代替@import，能避免全局变量污染，更贴合模块化的设计思路。

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