如何在Rails 7和importmaps中使用bootstrap-icons

2mbi3lxu  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(3)|浏览(164)

新领域:Rails 7.0.1、Ruby 3.1.0
rails new rails7app
bin/importmap pin bootstrap将 Bootstrap 添加到应用程序。
Bootstrap是js和css的结合。bootstrap-icons似乎基本上是css。使用yarn/npm方法,yarn install bootstrap-icons可以工作,但使用Rails 7和没有npm的bin/importmap pin bootstrap-icons不工作。这是css的一部分。
如何将bootstrap-icons添加到基本的Rails 7应用程序?

wztqucjr

wztqucjr1#

Importmaps只处理javascript。
您需要将bootstrap添加到gem文件中

gem 'bootstrap', '~> 5.1', '>= 5.1.3'

建议也取消gem文件中sasssc-rails行的注解

gem 'sassc-rails'

然后,您应该能够在app/assets/stylesheets/application.scss中添加引导导入

@import "bootstrap";

编辑:
抱歉,为了添加bootstrap-icon部分,您的app/assets/stylesheets/application.scss需要同时导入bootstrap-icon css。您可以在导入时引用CDN,也可以将css放在您的/vendor文件夹中并在导入时引用相对路径。
这是app/assets/stylesheets/application.scss使用的CDN方法

@import "bootstrap";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

然后您可以向视图页添加图标。
这段代码在我的home.html.erb上,呈现了一个蓝色的闹钟。

<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
p8ekf7hl

p8ekf7hl2#

请参阅Joe Thor的第一条评论,这为我的设置中的错误添加了一个解决方案。对我来说有效的是添加:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
转换为application.html.erb,并使用建议的语法:<i class="bi bi-bootstrap text-success"></i>
语法<%= icon("bootstrap", class: "text-success") %>node-modules/…中查找,但没有安装,因此得到一个错误。这是我一直在使用的语法。更多Rails。
application.scss中的@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");由于某种原因不工作,尽管看起来应该工作。
Boostrap通过混合svg图标和字体来获得“图标”似乎没有帮助。

8ehkhllq

8ehkhllq3#

我自己也在努力解决这个问题,直到我意识到bootstrap-icons.css引用了文件顶部的两个字体文件。我在这里找到了一个很好的资源:https://world.hey.com/aesmail/custom-fonts-in-production-in-rails-7-0-d3765485
首先我从https://github.com/twbs/icons下载了字体文件。下载时一定要得到实际的woff和woff 2文件,而不是html。
我把这两个文件放在app/assets/fonts中。
在bootstrap-icons.css中,我使用了font-url助手,并将文件src改为:

src: font-url("bootstrap-icons.woff2") format("woff2"),
font-url("bootstrap-icons.woff") format("woff");

然后我将文件扩展名更改为bootstrap-icons.scss
我还将这一行添加到了app/assets/config/manifest.js的顶部

//= link_tree ../fonts

在我看来,HAML是这样的:

%i.bi.bi-trash

上次我跑的时候

rails assets:precompile

在开发和生产中对我很有用。我不需要固定任何东西或者包含一个节点模块。

相关问题