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

Question

我已经按照这里的说明（https://icons.getbootstrap.com/）将Bootstrap图标安装到了Laravel/VueJS应用程序中。接下来该怎么做呢？

如果我想在blade模板中使用svg元素，我需要使用webpack进行编译吗？我需要将它导入到css文件中吗？

在单文件VueJS组件中如何使用它？

- DatsunBing

---

我建议使用BootstrapVue，然后您可以将图标用作组件：https://bootstrap-vue.js.org/docs/icons - S.Visser

Answer 1

我可以按照以下步骤，通过使用 Laravel Mix，将 Bootstrap Icons 版本 1.5.0 安装到 Laravel 8 项目中。

运行以下命令来将 Bootstrap Icons 安装到您的项目中：

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>

愉快编码！！！

- mili

Answer 2

米利的答案有误，因为如果

@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/中找到反馈窗口。

- Alberto Suárez

---

这对我有用。 在 webpack.mix.js 中更改资源根路径。 mix.setResourceRoot('/<your_webserver_root>/<laravel_dir>/public/'); 例如，如果您在 osx 上使用 MAMP。可能会像这样： mix.setResourceRoot('/Applications/MAMP/htdocs/laravel_project/public/');然后将字体目录复制到您的 Laravel 项目中的 public/css/fonts。 mix.options({ processCssUrls: false }).copy('node_modules/bootstrap-icons/font/fonts', 'public/css/fonts');将这两个添加到 webpack.mix.js 中并执行 npm run dev。路径应该已经修复了。 - Argos

Answer 3

对我来说，解决问题的方法是在webpack中删除sass指令：

.options({ processCssUrls: false })

不需要声明字体。

- jurandou

Answer 4

使用npm包在Node.js应用程序中安装Bootstrap：

复制npm install bootstrap，然后使用require('bootstrap')将加载所有Bootstrap的jQuery插件到jQuery对象中。

之后使用npm install bootstrap-icons将Bootstrap图标安装到您的项目中，并从node-modules中将其包含在app.js中。

完成上述步骤后，如果npm run dev成功运行，则可以在Vue组件中添加SVG元素。

<svg class="bi bi-chevron-right" width="32" height="32" 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>

仅供演示目的

问> 如果我想在 Blade 模板中使用 svg 元素，我需要使用 webpack 进行编译吗？我需要将它导入到 css 文件中吗？

答.> 不需要，在 Blade 中使用时无需编译，只需导入所有 Bootstrap 文件，如 js 文件和 css 文件。

- Ankush Sood

Answer 5

我找到答案了 :)

你可以安装vite-plugin-static-copy。

npm i -D vite-plugin-static-copy

你应该在 vite.config.js 中编写类似的代码

import { viteStaticCopy } from 'vite-plugin-static-copy' // <-- Import static-copy package
...

plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        viteStaticCopy({ // <-- Add this code block
            targets: [
                { //For build
                    src: 'node_modules/bootstrap-icons/font/fonts/*',
                    dest: 'assets/fonts'
                },
                { // For Dev
                    src: 'node_modules/bootstrap-icons/font/fonts/*',
                    dest: 'resources/sass/fonts'
                }
            ]
        })
    ],

之后您可以运行npm build或dev。

npm run dev
npm run build

- Murat Çakmak