必须在@import "bulma"前定义$color变量,如$body-background-color: #f8f9fa;变量带!default不可二次覆盖,需确保顺序正确且构建工具正确加载路径。

如何修改 $body-background-color 等全局 Sass 变量
Bulma 的样式重置不是靠覆盖 CSS 规则,而是直接在 Sass 编译前改它的变量值。你必须在 @import "bulma" 之前定义变量,否则 Bulma 已经用默认值生成了样式,再改就无效了。
常见错误是把变量写在 @import 后面,或者用 !default 二次赋值——Bulma 的变量本身已带 !default,重复声明不会覆盖。
- 在自定义 Sass 入口文件(如
main.sass)顶部先写:$body-background-color: #f8f9fa $primary: #4a6fa5 $family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif
- 确保所有变量都在
@import "bulma"之前,顺序不能错 - 如果用 Webpack 或 Vite,确认 Sass 加载器没把变量文件和 Bulma 源文件拆成独立编译单元(会导致变量丢失)
为什么改了 $size-7 却没影响 is-size-7 类?
因为 $size-7 是 Bulma 内部用于生成响应式字体类的“原始值”,它只在 bulma/sass/base/variables.sass 被读取一次;但 is-size-7 类实际由 bulma/sass/base/helpers.sass 中的循环生成,该文件依赖的是 $sizes 这个 map,而不是单个变量。
所以想调整 is-size-7,得重写整个 $sizes map:
立即学习“前端免费学习笔记(深入)”;
$sizes: ( 1: 3rem, 2: 2.5rem, 3: 2rem, 4: 1.5rem, 5: 1.25rem, 6: 1rem, 7: 0.75rem )
注意:这个 map 必须在 @import "bulma/sass/base/helpers" 前定义,且 key 必须是数字,value 必须带单位。
重置 $navbar-height 后下拉菜单位置错乱
Navbar 相关组件(如 navbar-item has-dropdown)的定位逻辑依赖多个变量联动:$navbar-height、$navbar-padding-vertical、$dropdown-content-offset。只改其中一个,dropdown 的 top 偏移会失准。
- 推荐同步调整:
$navbar-height: 64px $navbar-padding-vertical: 1rem $dropdown-content-offset: 64px
- 若使用
navbar-brand+navbar-burger,还需检查$navbar-burger-margin是否与新高度匹配 - 移动端下拉菜单(
.navbar-menu)的显示逻辑不依赖这些变量,但动画高度可能需额外加max-height适配
用 npm install bulma 安装后找不到 bulma/sass/ 目录?
npm 发布的 Bulma 包里确实包含 sass/ 子目录,但路径是 node_modules/bulma/sass/,不是 node_modules/bulma/scss/(那是 Bootstrap 的习惯)。常见误操作是配置了错误的 includePaths 或用了 @use 语法(Bulma 目前仍基于 @import)。
- Webpack sass-loader 示例配置:
options: { additionalData: '@import "@/styles/bulma-variables.sass"', implementation: require('sass'), sassOptions: { includePaths: ['node_modules/bulma/sass'] } } - Vite 用户注意:
vite-plugin-sass默认不支持includePaths,得换用vite-plugin-style-import或手动配置css.preprocessorOptions.sass.additionalData - 别用
@use "bulma/sass/base/minireset"—— Bulma 尚未迁移到模块化 Sass,@use会报Undefined variable
bulma/sass/utilities/derived-variables.sass),看清哪些变量是“被计算出来的”,再决定从哪一层下手。


















