ruby-on-rails - 如何在 Rails 7 和 importmaps 中使用引导图标

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 并且没有 npmbin/importmap pin bootstrap-icons则不起作用。有点期待，因为这是css。

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

Answer 1

Importmaps 仅处理 javascript。

您需要将引导程序添加到您的 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文件夹中并在导入时引用相对路径。

这是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>

Answer 2