问大家一个问题:Laravel5.8如何引入 Bootstrap?
laravle5.8开发过程中,使用 Bootstrap 来作为应用的前端框架。
Laravel 并不强制你使用 CSS 框架,但是laravel提供了对 Bootstrap 的支持,在 resources/js/bootstrap.js
(在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js
)中!
Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的,NPM 是 Node.js(一个基于 Google V8 引擎的 JavaScript 运行环境)的包管理和分发工具。
运行 npm install 安装 Bootstrap 库
上述 package.json
可类比为前端的 composer.json
,我们通过 npm install
安装该文件中定义的依赖,就好比运行 composer install
安装 composer.json
中定义的依赖,只不过一个是安装的是 JavaScript 库,一个是安装的是 PHP 库。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功
你还没有在项目根目录下运行过 npm install
初始化项目依赖的前端资源,现在可以运行它,当然在此之前,需要在你的系统中安装最新版本的 Node.js。
Windows 上安装 Node.js
你可以采用以下两种方式来安装。
1、Windows 安装包(.msi)
32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi
64 位安装包下载地址(推荐使用最新版) : https://nodejs.org/dist/v10.16.2/node-v10.16.2-x64.msi
本文实例以 v0.10.26 版本为例,其他版本类似, 安装步骤:
步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:
步骤 2 : 点击以上的Run(运行),将出现如下界面:
安装完成后,进入dos命令模式
在进入到laravel项目中,执行npm install
安装完成之后,让我们对 Laravel 默认生成的 app.scss
文件进行编辑,删除此文件里的所有内容,只留下面一行,导入 Bootstrap:
resources/sass/app.scss
// Bootstrap
@import '~bootstrap/scss/bootstrap';
运行 npm run dev 编译前端资源
将 Bootstrap 导入成功之后, 接下来我们需要使用以下命令来将 .scss
文件编译为 .css
才能正常使用,编译命令如下:npm run dev
我们就可以运行 npm run dev
命令通过 Laravel Mix 来编译前端资源了,该命令定义在 package.json
中
大多数时候我们需要在 resources/js/app.js
和 resources/sass/app.scss
中编写代码,引入其它模块,然后运行 npm run dev
就可以了,无需任何额外配置。后面我们会专门讲一下 Laravel Mix 的各种使用,现在你只需要知道它是怎么回事就好了。
Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js
:
它非常之简洁,从 node_modules
中引入 laravel-mix
库,然后运用它提供的 js
和 sass
方法将 resources/js/app.js
编译打包后输出到 public/js/app.js
,将 resources/sass/app.scss
(Sass文件)编译打包后输出到 public/css/app.css!
这样,我们就可以项目的前端文件下引入 /css/app.css
和 /js/app.js
使用 Bootstrap 提供的样式和 JavaScript 组件了。后面我们将在多个地方基于 Bootstrap 实现前端 CSS 视觉效果优化。
Laravel 在运行时,是以 public
文件夹为根目录的,因此我们可以使用下面这行代码来为 Laravel 引入样式:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
上面代码将引入 public/css/app.css
样式文件。
来源:https://blog.csdn.net/Aaroun/article/details/98759914