Bulma 是基于 Flexbox 的免费、开源和现代无依赖的 CSS 框架,在 Laravel 项目中使用 Bulma 很简单,可以直接引入 CDN 方式来使用, 也可以通过 npm install
安装方式来使用, 今天我将在博客项目中通过 npm install
安装方式来使用 Bulma。
安装 bulma
Laravel 项目默认有 package.json
文件,devDependencies
下面默认有 axios
、laravel-mix
、lodash
和 postcss
前端依赖,先安装这些依赖。
安装依赖:
npm install
运行以下命令安装 bulma:
npm install -s bulma
安装 sass 和 sass-loader
运行以下命令安装 sass 和 sass-loader:
npm install -s sass sass-loader
安装 font-awesome
项目中会用到一些图标,bulma 和 font-awesome 搭配使用非常的好。
运行以下命令安装 font-awesome
:
npm install -s font-awesome
使用 Bulma
在 resource 目录中创建一个 scss 目录:
mkdir resource/scss
创建一个 app.scss 文件:
mkdir app.scss
修改 app.scss 文件内容如下:
@import "~bulma";
- 修改
webpack.mix.js
文件,将内容替换为如下内容:
const mix = require('laravel-mix');
mix.sass('resources/scss/app.scss', 'public/css/app.css');
将 app.scss
文件编译为 app.css
:
npm run prod
- 修改默认视图文件,去除
style
标签,使用link
标签引入编译后的app.css
样式文件。
resources/views/welcome.blade.php
。
<link href="%7B%7B%20asset('css/app.css')%20%7D%7D" rel="stylesheet">
使用浏览器打开 http://blog.test
页面可以看到如下页面:
上面页面的效果就是 Bulma 提供的样式,Github 图标就是 font-awesome 的图标。