新领域:Rails 7.0.1、Ruby 3.1.0rails 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应用程序?
3条答案
按热度按时间wztqucjr1#
Importmaps只处理javascript。
您需要将bootstrap添加到gem文件中
建议也取消gem文件中sasssc-rails行的注解
然后,您应该能够在
app/assets/stylesheets/application.scss
中添加引导导入编辑:
抱歉,为了添加bootstrap-icon部分,您的
app/assets/stylesheets/application.scss
需要同时导入bootstrap-icon css。您可以在导入时引用CDN,也可以将css放在您的/vendor
文件夹中并在导入时引用相对路径。这是
app/assets/stylesheets/application.scss
使用的CDN方法然后您可以向视图页添加图标。
这段代码在我的
home.html.erb
上,呈现了一个蓝色的闹钟。p8ekf7hl2#
请参阅Joe Thor的第一条评论,这为我的设置中的错误添加了一个解决方案。对我来说有效的是添加:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
转换为
application.html.erb
,并使用建议的语法:<i class="bi bi-bootstrap text-success"></i>
。语法
<%= icon("bootstrap", class: "text-success") %>
在node-modules/…
中查找,但没有安装,因此得到一个错误。这是我一直在使用的语法。更多Rails。application.scss
中的@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
由于某种原因不工作,尽管看起来应该工作。Boostrap通过混合svg图标和字体来获得“图标”似乎没有帮助。
8ehkhllq3#
我自己也在努力解决这个问题,直到我意识到bootstrap-icons.css引用了文件顶部的两个字体文件。我在这里找到了一个很好的资源:https://world.hey.com/aesmail/custom-fonts-in-production-in-rails-7-0-d3765485
首先我从https://github.com/twbs/icons下载了字体文件。下载时一定要得到实际的woff和woff 2文件,而不是html。
我把这两个文件放在app/assets/fonts中。
在bootstrap-icons.css中,我使用了font-url助手,并将文件src改为:
然后我将文件扩展名更改为bootstrap-icons.scss
我还将这一行添加到了app/assets/config/manifest.js的顶部
在我看来,HAML是这样的:
上次我跑的时候
在开发和生产中对我很有用。我不需要固定任何东西或者包含一个节点模块。