自定义编译bulma

src
└── scss
├── _theme.scss
├── _variables.scss
└── main.scss

// 必要的工具函数（box 和 helpers 都会用到）
@use "bulma/sass/utilities/functions" as *;
@use "bulma/sass/utilities/mixins" as *;
@use "bulma/sass/utilities/initial-variables" as *;
@use "bulma/sass/utilities/derived-variables" as *;

@use "bulma/sass/base/minireset";

// 只引入需要的组件
@use "bulma/sass/elements/box";
@use "bulma/sass/helpers/flexbox";
@use "bulma/sass/helpers/visibility";

// 主色调 - 柔和蓝色
$primary: #7eb3e8;
$primary-invert: findColorInvert($primary);

// 辅助色
$success: #48c774;
$warning: #ffdd57;
$danger: #ff7a7a;
$info: #209cee;

// 文字
$family-sans-serif: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$text: #4a4a4a;
$text-strong: #363636;

// 间距
$gap: 32px;
$column-gap: 0.75rem;

// 响应式断点
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;

@use "variables" as *;

@use "theme";

.button {
  transition: all 0.2s ease;
  
  &.is-primary {
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba($primary, 0.2);
    }
  }
}

.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

"build-bulma": "sass --load-path=node_modules ./src/scss/main.scss my-bulma-project.css",
"build": "pnpm run build:scss && pnpm run postcss",
"build:scss": "sass src/scss/main.scss dist/css/theme.css --no-source-map",
"postcss": "postcss dist/css/theme.css -o dist/css/theme.min.css --use autoprefixer --no-map",
"watch": "sass --watch src/scss/main.scss dist/css/theme.css --no-source-map",
"start": "pnpm run watch"