如何在Bulma CSS框架中通过Sass变量重置基础样式-css教程-PHP中文网

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

如何在bulma css框架中通过sass变量重置基础样式

如何修改 `$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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

$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