gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:00:32 54 4
gpt4 key购买 nike

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

最佳答案

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>

关于ruby-on-rails - 如何在 Rails 7 和 importmaps 中使用 bootstrap-icons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70775355/

54 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com