如何在Rails 7和导入映射中使用引导图标

Question

新领域: Rails 7.0.1，Ruby 3.1.0

rails new rails7app

bin/importmap pin bootstrap将引导程序添加到应用程序中。

引导是js和css的组合。bootstrap-icons似乎基本上是css。使用纱线/ npm方法，yarn install bootstrap-icons可以工作，但是对于Rails 7，没有npm bin/importmap pin bootstrap-icons不工作。有点期待，因为这是css。

如何将bootstrap-icons添加到基本的Rails 7应用程序中？

Answer 1

Importmap只处理javascript。

您需要将引导程序添加到您的gem文件中。

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

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

gem 'sassc-rails'

那么您应该能够在您的app/assets/stylesheets/application.scss中添加一个引导导入。

@import "bootstrap";

编辑：

抱歉，为了添加引导图标部分，您的app/assets/stylesheets/application.scss也需要导入引导图标css。您可以在导入时引用CDN，也可以将css放在您的/vendor文件夹中，并在导入时引用相对路径。

这是使用CDN方法的app/assets/stylesheets/application.scss

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

然后，可以向视图页添加图标。

此代码位于我的home.html.erb上，并呈现一个蓝色的alarmclock。

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

Answer 2

参见Joe的第一条评论，这为我设置中的错误添加了一个解决方案。我要说的是：

<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/…中查找，因此获得一个错误。这是我一直使用的语法。再来点莱西。

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"); in application.scss并不是因为某种原因而起作用的，尽管它似乎应该起作用。

引导似乎没有帮助通过混合svg图标和字体来获得“图标”。