必须在@import Bulma前定义Sass变量，如$primary: #2a5dc4；需按initial-variables→自定义→functions→derived-variables→模块顺序导入；改基础变量（如$radius、$link-color）会连锁影响组件样式；按需导入子模块可减小CSS体积。
如何覆盖Bulma的默认Sass变量
必须在引入Bulma源码前定义变量，否则会被忽略。Bulma靠$primary、$size-7这类Sass变量控制全局样式，但它们有默认值，且多数带!default标记——这意味着只能在@import之前赋值才有效。
- 在自己的
main.sass（或custom.scss）顶部先写$primary: #2a5dc4，再@import "bulma/sass/utilities/initial-variables" - 不要试图在
@import bulma之后重定义$primary，Sass编译时已锁定初始值 - 部分变量如
$family-sans-serif是列表类型，需保持结构一致：$family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 用
!global强行覆盖极少见，也不推荐；正确路径是找准变量定义位置（通常在bulma/sass/utilities/initial-variables.sass或derived-variables.sass）
哪些变量改了会连锁影响组件表现
不是所有变量都“安全”修改。$radius、$shadow、$weight-bold这类基础变量被大量组件引用，改动后按钮、卡片、菜单的圆角、阴影、字重会同步变化，但$navbar-height只影响导航栏，影响面窄。
-
$size-6和$size-7被.is-size-6/.is-size-7类直接使用，改了会影响所有响应式字号类 -
$control-height同时作用于<input>、<select></select>、.button，统一调高可能让表单控件和按钮高度不协调 -
$block-spacing控制.block、.notification等间距，但不会影响.card内部padding——那是$card-padding管的 - 改
$link-color会变a、.tag.is-link、.button.is-link的颜色，但.button.is-primary仍走$primary
为什么@import "bulma"不能直接替换为@import "bulma/bulma"
因为Bulma主入口文件bulma.sass做了条件导入控制，它依赖initial-variables和derived-variables的加载顺序。直接导入bulma/bulma（即bulma.sass）会跳过你自定义的变量，导致覆盖失效。
- 正确做法是分步导入：
@import "bulma/sass/utilities/initial-variables"→ 自定义变量 →@import "bulma/sass/utilities/functions"→@import "bulma/sass/utilities/derived-variables"→ 最后@import "bulma/sass/base/minireset"及后续模块 - 如果你用的是npm安装的Bulma，路径必须写全：
bulma/sass/elements/button，而不是./node_modules/bulma/sass/...（Sass loader通常已配置includePaths） - Webpack + sass-loader下，确保
sassOptions里没设indentedSyntax: true，否则.sass文件解析会出错
编译后CSS体积暴增？检查是否误启用了未裁剪模块
Bulma默认导出全部组件，哪怕你只用了.button和.container，整个框架CSS也会打进包里。变量定制不解决体积问题，得靠手动导入子模块。
立即学习“前端免费学习笔记（深入）”；
- 删掉
@import "bulma"，改用按需导入：@import "bulma/sass/base/minireset"、@import "bulma/sass/elements/button"、@import "bulma/sass/components/card" - 别漏掉
utilities目录里的all——它包含.has-text-centered这类工具类，但all.sass会导入全部utility，建议只引需要的，比如typography.sass或spacing.sass - 如果用了
bulma-extensions，它的变量不继承主框架，需单独覆盖，且命名常带ext-前缀，比如$ext-tabs-border-bottom - PostCSS插件如
cssnano对Bulma冗余规则收效有限，真正有效的压缩来自Sass层裁剪
变量名拼错、导入顺序颠倒、模块路径不完整——这三个点卡住的人最多。Bulma的Sass结构看着松散，其实依赖链很明确，动一个地方就得顺藤摸到它被谁读、谁又读它。
