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

Question

新领域：Rails 7.0.1、Ruby 3.1.0

rails new rails7app

bin/importmap pin 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 应用程序？

Answer 1

Importmaps 仅处理 javascript。

您需要将 bootstrap 添加到您的 gem 文件中

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

建议也取消注释gem文件中的sassc-rails行

gem 'sassc-rails'

然后您应该能够在您的

app/assets/stylesheets/application.scss

中添加引导导入

@import "bootstrap";

编辑：

抱歉，为了添加 bootstrap-icon 部分，您的

app/assets/stylesheets/application.scss

还需要导入 bootstrap-icon css。您可以在导入时引用 CDN，也可以将 css 放入您的

/vendor

文件夹中并在导入时引用相对路径。

这是使用CDN方式的

app/assets/stylesheets/application.scss

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

然后您可以将图标添加到您的视图页面。

此代码位于我的

home.html.erb

上并呈现一个蓝色闹钟。

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

Answer 2

请参阅 Joe Thor 的第一条评论，这为我的设置中的错误添加了解决方法。对我有用的是添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

到

application.html.erb

并使用建议的语法：

<i class="bi bi-bootstrap text-success"></i>

。

语法

<%= icon("bootstrap", class: "text-success") %>

会查找未安装的

node-modules/…

，因此会出现错误。这是我一直在使用的语法。更多 Railsy。

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

中的

application.scss

由于某种原因无法正常工作，尽管看起来应该如此。

Boostrap 似乎无法通过混合 svg 图标和字体来获得“图标”。

Answer 3

我自己也在努力解决这个问题，直到我意识到 bootstrap-icons.css 引用了文件顶部的两个字体文件。我在这里找到了一个很好的资源：https://world.hey.com/aesmail/custom-fonts-in-product-in-rails-7-0-d3765485

首先我从https://github.com/twbs/icons下载了字体文件。下载时请确保您获得的是实际的 woff 和 woff2 文件，而不是 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

在开发和生产方面为我工作。我不需要固定任何东西或包含节点模块。

Answer 4

您可以随时使用CDN链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-tViUnnbYAV00FLIhhi3v/dWt3Jxw4gZQcNoSCxCIFNJVCx7/D55/wXsrNIRANwdD" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-tViUnnbYAV00FLIhhi3v/dWt3Jxw4gZQcNoSCxCIFNJVCx7/D55/wXsrNIRANwdD" crossorigin="anonymous">