如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标

Posted 2023-02-23

技术标签:

【中文标题】如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标【英文标题】：How to use Bootstrap 4 icons in Laravel with VueJS 【发布时间】：2020-06-18 22:54:47 【问题描述】：

我已经使用 NPM 将 Bootstrap 图标安装到 Laravel/VueJS 应用程序中，根据此处的说明，https://icons.getbootstrap.com/。下一步是什么？

如果我想在刀片模板中使用 svg 元素，我需要用 webpack 编译它吗？我是否将其导入到 css 文件中？

以及如何在单个文件的 VueJS 组件中使用它？

【问题讨论】：

我建议使用 BoostrapVue 然后你可以使用图标作为组件：bootstrap-vue.js.org/docs/icons 【参考方案1】：

我可以按照以下步骤将引导图标版本 1.5.0 安装到 Laravel 8 项目并使用 laravel mix。

运行此命令将引导图标安装到您的项目中

npm i bootstrap-icons

将此添加到 resources\sass\app.scss

@import '~bootstrap-icons/font/bootstrap-icons';

检查 webpack.mix.js 文件有这个

mix.sass('resources/sass/app.scss', 'public/css')

运行它来编译你对公共文件夹的更改

npm run dev

然后您可以在页面的任何位置使用图标（.blade 或 .vue 文件）

<i class="bi-alarm"></i>

编码愉快！！！

【讨论】：

【参考方案2】：

mili的回答有错误，因为如果

@import '~bootstrap-icons/font/bootstrap-icons';

包含在 resources\sass\app.scss 中，然后在使用 npm run dev 构建时，我的 app.css 文件中不包含 @font-face 指令。为了使指令出现，我必须添加 «css» 扩展名，以便正确的 @import 是：

@import '~bootstrap-icons/font/bootstrap-icons.css';

但是还有另一个问题，在这种情况下是构建器的问题，导致浏览器不显示图标（而是出现一个正方形，表示浏览器无法呈现 svg 图标）。构建器在 public/css/app.css

中生成以下指令

    @font-face 
  font-family: "bootstrap-icons";
  src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");

Laravel 找不到文件，因为 url() 不理解绝对路径（在我的开发环境中）。如果在两条路径之前添加«..»，则一切正常（图标出现在页面中）：

    @font-face 
  font-family: "bootstrap-icons";
  src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");

问题是每次您为任何其他包运行npm run dev 时，“..”都会自动被覆盖，因此不再显示图标。

我看到其他人有同样的问题，但我不知道应该在哪里通知问题和解决方案。我会尝试在 https://getbootstrap.com/

中找到反馈窗口

【讨论】：

【参考方案3】：

使用 npm 包在 Node.js 驱动的应用中安装 Bootstrap：

复制npm install bootstrap require('bootstrap') 会将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。

之后，使用npm install bootstrap-icons 将引导图标安装到您的项目中，并将其从节点模块包含在您的 app.js 中。

之后，如果 npm run dev 运行成功，则在你的 Vue 组件中添加 SVG 元素。

<svg class="bi bi-chevron-right"   viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

用于演示目的

Q> 如果我想在刀片模板中使用 svg 元素，我需要用 webpack 编译它吗？我是否将其导入到 css 文件中？

Ans.> 不，在blade中使用时不需要编译，只要你导入所有的引导文件，如js文件和css文件。

【讨论】：

【参考方案4】：

对我来说，问题已在 webpack 中通过 sass 指令解决：