Bulma 定制开发

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

这个部分是高级内容，讲解如何定制 Bulma，也就是修改默认样式。Bulma 采用 Sass 语法（注意，不是 Scss 语法），所以定制的样式也必须使用 SASS。

首先，克隆或下载源码。

$ git clone https://github.com/jgthms/bulma.git

然后，安装依赖。

$ cd bulma
$ npm install

接着，在源码的根目录里面，新建一个app.sass文件，定制的代码都写在这个文件。在它里面，先引入 Bulma 基础变量。如果需要的话，可以改掉。

@import "./sass/utilities/initial-variables"

$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面代码中，预设的blue、pink和family-serif变量被改掉。
有一些 Bulma 变量是从基础变量衍生的，需要的话也可以改掉。

$primary: $pink

上面代码中，主色调改成了pink变量。

接着，在这个文件里面加载 Bulma 的入口脚本。

@import "./bulma"

这一行的下面，你就可以写自己的样式了，比如为所有标题加一个下划线。

.title {
  text-decoration: underline;
}

最后，打开package.json，找到下面这一行。

"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",

把里面的bulma.sass改成app.sass。

"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",

以后每次修改完样式，运行一下npm run build，就会生成自己的样式表css/bulma.css了。

好了就讲到这里，更多内容请移步到官方进行学习。https://bulma.io。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » Bulma 定制开发