如何将 bootstrap-icons 与 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并且没有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文件夹中并在导入时引用相对路径。

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