Laravel 博客开发｜Laravel 项目中安装和使用 Bulma

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";

4. 修改 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

5. 修改默认视图文件，去除 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 的图标。