您可以仅从 Bulma 导入您需要的内容，并使用您自己的 Sass 值对其进行定制。
要实现此目的
- 设置您自己的 Sass 变量
- 导入
bulma/sass/utilities - 通过使用
with关键字和您自己的 Sass 映射来覆盖 Bulma 的变量 - 如果您需要，对
bulma/sass/form文件夹执行相同的操作 - 使用
@use或@forward导入您需要的 Bulma 组件 - 最后，从
bulma/sass/themes导入 Bulma 主题
赞助商
使用模块化 Sass 进行定制
仅导入您需要的内容并对其进行定制
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Override global Sass variables from the /utilities folder
@use "bulma/sass/utilities" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px
);
// Override Sass variables from the /form folder
@use "bulma/sass/form" with (
$input-shadow: none
);
// Import the components you need
@forward "bulma/sass/base";
@forward "bulma/sass/components/card";
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/notification";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/layout/footer";
// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";
// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");这允许你覆盖 Bulma 的
- 来自
utilities文件夹的全局变量 - 来自
form文件夹的表单变量
如果你想导入一个组件并自定义它，在导入时执行相同操作
@use "bulma/sass/elements/image" with (
$dimensions: 20 40 80 160;
);