如何在 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. Ran

   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";

像这样在

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

命令启动服务器，然后引导图标出现！

编辑

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

安装引导图标。

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 命令启动服务器。

但我不确定Tailwind。

Answer 2

在

application.scss

中您可以简单地导入

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

Answer 3

您在 scss 文件中定义了字体吗？

我的进口下方有这个

@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

Answer 4

我的运行版本

• ruby 3.3.5（2024-09-03 修订版 ef084cc8f4）[x86_64-linux]
• Rails 7.1.4

就我而言，要使用 bootstrap 和 bootstrap-icons，我执行了以下操作：

我在 Gemfile 中添加了“bootstrap”，但我也需要“sassc-rails”，使用以下命令：

bundle add sassc-rails
bundle add bootstrap

安装引导图标。

npm i bootstrap-icons

将此行添加到

app/assets/stylesheets/application.scss

。

// ... others implementations

// Fix font-dir before import bootstrap-icons
$bootstrap-icons-font-dir: "./bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

编辑

config/initializers/assets.rb

。

Rails.application.config.assets.paths << Rails.root.join("node_modules")

最后，我运行了命令：

bin/rails assets:precompile

启动服务器，就我而言：

bin/rails s