在您的终端,创建一个叫做 mybulma
的新文件夹,进入该文件夹,然后键入下面命令:
使用 node-sass
使用 npm/yarn 和 node-sass
1. 创建一个 package.json
文件
#
这家载入一个互动安装程序创建 package.json
。当提示输入一个入口点(entry point)时,输入 sass/mystyles.scss
。
2. 安装开发依赖软件 #
您只需要 2 个包定制 Bulma:node-sass
和 bulma
。
您的 package.json
此时看起来应该像这样。
3. 创建一个 Sass 文件 #
创建一个 sass
文件夹用来添加一个叫做 mystyles.scss
的文件:
确保 bulma.sass
文件中的路径正确。
4. 创建一个 HTML 页面 #
创建一个使用 Bulma 组件的 HTML 模板。
保存文件为 mypage.html
。
注意 css/mystyles.css
路径是您的样式表。这时我们要用 Sass 生成的 CSS 文件的位置。
在您的浏览器内打开页面:
5. 添加 node 脚本构建您的 CSS #
要从 Sass 文件构建 CSS 文件,可以使用 node scripts。在 package.json
中添加下列脚本:
-
css-build
以sass/mystyles.scss
为源码输出css/mystyles.css
,省略了源 map -
css-watch
构建 CSS 并且监测源码修改 -
start
是css-watch
的简写形式
要测试,进入您的终端并月运行下面命令:
如果安装正确,您会看到下面信息:
刷新页面会发现页面已经加载样式表:
要监测更新,只需使用下面命令:
6. 添加您自己的 Bulma 样式 #
用下面代码替换 mystyles.scss
文件内容:
由于您在监测修改,只需保存文件即可查看结果:
嗯,voilà!您可以安装和定制 Bulma 啦。
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容