ruby-on-rails - 如何在 Rails 7.0 中使用 Bootstrap 图标？

Question

我想在我的 Rails 7.0 应用程序中使用 Bootstrap 图标，但图标已折叠。

它应该显示“加号”图标(此图像在我的旧应用程序中)。

我也收到 ActionController::RoutingError。

08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1  |   
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):

以下是我执行的步骤:

由 rails new my-app-name --css bootstrap 创建了一个新应用程序

冉 npm i bootstrap-icons (然后我得到 "bootstrap-icons": "^1.7.2" 在我的 package.json )

已编辑 app/assets/stylesheets/application.bootstrap.scss像这样:

  @import 'bootstrap/scss/bootstrap';
  @import 'bootstrap-icons/font/bootstrap-icons';
  @import 'custom';

像这样写erb:

  <%= link_to new_project_path, class: "btn btn-primary" do %>
    <i class="bi bi-plus" aria-hidden="true"></i>
    New Project
  <% end %>

通过 bin/dev 启动我的应用程序

我阅读了这些页面，但无法解决错误；

https://icons.getbootstrap.com/#usage

https://github.com/rails/cssbundling-rails/issues/22

https://github.com/rails/sprockets-rails/pull/476

Answer 1

我不确定这是否是最好的解决方案，但它对我有用。
运行这些命令；

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

将此行添加到 app/assets/stylesheets/application.bootstrap.scss .

@import "bootstrap-icons/font/bootstrap-icons";

编辑 package.json 中的“build:css”脚本像这样。

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

使用 bin/dev 启动服务器命令然后出现 Bootstrap 图标!

编辑
我找到了更简单的解决方案。
安装 Bootstrap 图标。

npm i bootstrap-icons

将此行添加到 app/assets/stylesheets/application.bootstrap.scss .

@import "bootstrap-icons/font/bootstrap-icons";

编辑 config/initializers/assets.rb .

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

使用 bin/dev 启动服务器命令。就这样!
编辑2

I'm trying a similar approach with FontAwesome and Tailwind. However, the fonts are not found in my browser. For example: http://localhost:4000/webfonts/fa-solid-900.woff2. Are you able to share an example path that is used with the bootstrap fonts? Thanks.

我可以像这样使用 FontAwesome:
安装 npm。

npm install --save @fortawesome/fontawesome-free

将以下行添加到 app/javascript/application.js .

import "@fortawesome/fontawesome-free/js/all"

编辑 ERB。

<i class="fas fa-arrow-right"></i>

使用 bin/dev 命令启动服务器。

但我不确定 Tailwind。