如何在 Rails 7.0 中使用 bootstrap-icons？

Question

我想在 Rails 7.0 应用程序中使用 bootstrap-icons，但图标已折叠。

它应该显示“加号”图标（该图像位于我的旧应用程序中）。

我还收到 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"):

以下是我所做的步骤：

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

2. 跑npm i bootstrap-icons（然后我进入"bootstrap-icons": "^1.7.2"我的package.json）

3. 编辑app/assets/stylesheets/application.bootstrap.scss如下：

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

4. erb 是这样写的：

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

5. 通过以下方式启动了我的应用程序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";

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

"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，然后引导程序图标出现！

编辑

我找到了更简单的解决方案。

安装引导图标。

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

我正在尝试使用 FontAwesome 和 Tailwind 类似的方法。但是，在我的浏览器中找不到这些字体。例如：http://localhost:4000/webfonts/fa-solid-900.woff2。您能否分享与引导字体一起使用的示例路径？谢谢。

我可以这样使用 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 命令启动服务器。

但我不确定顺风。