如何禁用Foundation框架默认样式减小CSS体积

谈到禁用 Foundation 框架默认样式，开发者通常会先尝试调整变量开关。但实际操作后会发现，这条路几乎行不通——那些硬编码的模块引入，并不会因为一个 $global-styles: false 就彻底消失。即使未使用任何组件，_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"，避免引入 dropdown。
• 完全跳过 typography 和 grid——如果已使用原生 CSS Grid 或 Tailwind 布局，这两部分纯属冗余。

以下是一个精简入口示例：

@import "foundation/scss/settings";
@import "foundation/scss/utilities";
// 仅需按钮，跳过排版、网格、表单、弹窗
@import "foundation/scss/components/button";
@import "foundation/scss/components/close-button";

容易被忽略的体积大户：_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 类。
• 如果项目中不使用 .float-left、.text-center 等辅助类，直接删除整个 _utilities.scss 是可行的。现代布局通常使用 Flex 或 Grid 直接编写，比 utility class 更可控。
• 注意：_settings.scss 中的 $print-styles 变量无效——它仅影响 JS 的打印逻辑，不影响 CSS 输出。

最后补充一点：Foundation 的 flex-grid 和 float-grid 是两套完全独立的系统。即使禁用了 flex-grid，_grid.scss 仍会输出浮动栅格代码——除非连 @import "grid" 都跳过。