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

Question

这里的新领域: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 应用程序？

Answer 1

Importmaps 仅处理 javascript。

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

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

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

gem 'sassc-rails'

然后您应该能够在您的 app/assets/stylesheets/application.scss

中添加 Bootstrap 导入

@import "bootstrap";

编辑:

抱歉，为了添加 Bootstrap 图标部分，您的 app/assets/stylesheets/application.scss 也需要导入 Bootstrap 图标 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");

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

此代码在我的 home.html.erb 上并呈现蓝色闹钟。

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