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

提到禁用 Foundation 框架的默认样式，许多人首先想到的是调整变量开关。然而实际操作后会发现，这条路基本行不通——那些硬编码的模块引入并不会因为一个 $global-styles: false 就彻底消失。即使你一个组件都没用，_global scss 和 _typography scss

提到禁用 Foundation 框架的默认样式，许多人首先想到的是调整变量开关。然而实际操作后会发现，这条路基本行不通——那些硬编码的模块引入并不会因为一个 $global-styles: false 就彻底消失。即使你一个组件都没用，_global.scss 和 _typography.scss 依然会输出将近 30KB 的重置与基础规则。要从根源上解决问题，需要从编译源头入手。

如何在Foundation框架中禁用默认样式以减小最终CSS体积？

为什么 `$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）硬塞进主入口，而且没有变量开关控制。即便你从未使用它们，这些样式也会被打包到最终 CSS 中——这可能是框架里最典型的“请神容易送神难”场景。

_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" 也跳过。