禁用 foundation 默认样式需从 sass 编译源头显式跳过模块，而非依赖变量开关；$foundation-global-styles: false 仅禁用全局重置，无法阻止 typography、grid 等模块的硬编码引入，必须新建最小化入口文件，按需导入 settings、utilities 和所需组件，并手动剔除 normalize.scss、print.scss 及冗余工具类。
禁用 Foundation 默认样式不能靠“关开关”，得从 Sass 编译源头跳过不需要的模块——否则哪怕你一个组件都没用，_global.scss 和 _typography.scss 仍会输出近 30KB 的重置与基础规则。
为什么 $foundation-global-styles: false 不起作用
这个变量只控制是否加载 _global.scss 中的 HTML 元素重置（如 body、h1、ul 的 margin/padding），但它不阻止 _typography.scss、_grid.scss 或 _button.scss 的自动引入。更关键的是：Foundation 的入口文件 foundation.scss 本身硬编码了这些 import，变量无法切断依赖链。
- 设
$foundation-global-styles: false后，margin: 0类仍可能从_typography.scss或_normalize.scss再次注入 - 所有组件（
dropdown、accordion）默认带基础边框/字体/行高，这些来自各自_component.scss，和全局变量无关 - 真正生效的只有极少数变量，比如
$include-html-grid-classes或$include-html-button-classes，但它们必须在 import 前声明
正确做法：新建自定义入口 + 显式跳过模块
删掉对 foundation.scss 的引用，改用最小化入口文件（如 custom-foundation.scss），只导入你真正在用的部分：
- 必须先 @import
"foundation/scss/settings"（含所有可覆盖变量） - 接着 @import
"foundation/scss/utilities"（工具函数，如rem-calc()），否则后续组件编译失败 - 然后按需 @import 组件，例如只用按钮就加
"foundation/scss/components/button"，别碰"foundation/scss/components/dropdown" - 彻底跳过
"foundation/scss/typography"和"foundation/scss/grid"—— 如果你用原生 CSS Grid 或 Tailwind 布局，这两块纯属冗余
示例精简入口：
@import "foundation/scss/settings"; @import "foundation/scss/utilities"; <p>// 只要按钮，不要排版、网格、表单、弹窗 @import "foundation/scss/components/button"; @import "foundation/scss/components/close-button";</p>
容易被忽略的体积大头：_normalize.scss 和 _print.scss
Foundation 默认把 _normalize.scss（约 8KB）和 _print.scss（约 5KB）塞进主入口，且没有变量开关。它们不会因你不用表格或打印功能而消失。
-
_normalize.scss在foundation/scss/global/_global.scss里被硬引入，跳过_global.scss就能规避，但代价是失去基础重置——这时建议手写轻量 reset（如仅清* { margin: 0; padding: 0; }） -
_print.scss从不被任何变量控制，必须手动注释掉它在foundation.scss中的@import "print"行，或在自定义入口里完全不引 - 如果你项目已用 Normalize.css 或 modern-normalize，直接删掉 Foundation 自带的 normalize 更安全
utilities 和 breakpoint 的隐性膨胀
Foundation 的 _utilities.scss 不像 Bootstrap 那样可配置，它生成的 .show-for-small、.hide-for-medium 等类默认覆盖全部断点（small 到 xxlarge），哪怕你只在移动端用。
- 修改
$breakpoints变量后重新编译，例如只留(small: 0, medium: 640px)，能砍掉一半响应式 utility 类 - 删掉整个
_utilities.scss是可行的——只要你不依赖.float-left、.text-center这类辅助类；现代布局通常用 Flex/Grid 直接写，比 utility class 更可控 - 注意：
_settings.scss里的$print-styles变量无效，它只影响 JS 打印逻辑，不影响 CSS 输出
最后提醒：Foundation 的 flex-grid 和 float-grid 是两套独立系统，即使你禁用了 flex-grid，_grid.scss 仍会输出浮动栅格代码——除非你连 @import "grid" 都跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
