我已经使用NPM将Bootstrap图标安装到Laravel/VueJS应用程序中,按照这里的说明,https://icons.getbootstrap.com/。下一步是什么?
如果我想在刀片模板中使用svg元素,我需要用webpack编译它吗?我需要将它导入到css文件中吗?
如何在单个文件VueJS组件中使用它?
我已经使用NPM将Bootstrap图标安装到Laravel/VueJS应用程序中,按照这里的说明,https://icons.getbootstrap.com/。下一步是什么?
如果我想在刀片模板中使用svg元素,我需要用webpack编译它吗?我需要将它导入到css文件中吗?
如何在单个文件VueJS组件中使用它?
5条答案
按热度按时间dy2hfwbg1#
我能够安装引导图标版本1.5.0到Laravel 8项目并使用Laravel mix,通过以下步骤。
运行此命令将引导图标安装到项目中
将其添加到resources\sass\app.scss
检查webpack.mix.js文件是否包含以下内容
运行此命令以编译对公用文件夹的更改
然后你可以在页面的任何地方使用图标(.blade或.vue文件)
编码快乐!!!
ktecyv1j2#
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图标)。
Laravel找不到文件,因为url()不理解绝对路径(在我的开发环境中)。如果你在两个路径前添加«..»,那么所有的工作(图标出现在页面中):
问题是,每次你为任何其他包运行
npm run dev
时,“..”都会被自动覆盖,所以这些图标再也看不到了。我看到其他人也有同样的问题,但我不知道应该在哪里通知问题和解决方案。我将尝试在**https://getbootstrap.com/**中找到反馈窗口
dw1jzc5e3#
使用npm包在Node.js支持的应用程序中安装Bootstrap:
Copy
npm install bootstrap
require('bootstrap')会将Bootstrap的所有jQuery插件加载到jQuery对象上。然后使用
npm install bootstrap-icons
将bootstrap图标安装到项目中,并将其包含在node-modules的app.js中。之后,如果
npm run dev
运行成功,则在Vue组件中添加SVG元素。用于演示目的
Q〉如果我想在刀片模板中使用svg元素,我需要用webpack编译它吗?我需要导入到css文件中吗?
答:不需要,只要导入所有的引导文件,如js文件和css文件,在blade中使用时就不需要编译。
cx6n0qe34#
对我来说,这个问题是固定的,在sass指令的webpack中删除:
不需要声明字体。
mw3dktmi5#
我找到答案了:)
您可以安装vite-plugin-static-copy
更新vite.config.js中的代码
然后你可以运行npm build或者dev。