新領域:Rails 7.0.1、Ruby 3.1.0
rails new rails7app
bin/importmap pin bootstrap 將引導程式添加到應用程式。
Bootstrap 是 js 和 css 的結合。bootstrap-icons似乎基本上是css。使用 yarn/npm 方法yarn install bootstrap-icons可以作業,但使用 Rails 7 并且沒有 npmbin/importmap pin bootstrap-icons則不起作用。有點期待,因為這是css。
如何添加bootstrap-icons到基本的 Rails 7 應用程式?
uj5u.com熱心網友回復:
Importmaps 僅處理 javascript。
您需要將引導程式添加到您的 gem 檔案中
gem 'bootstrap', '~> 5.1', '>= 5.1.3'
建議也取消注釋 gem 檔案中的 sassc-rails 行
gem 'sassc-rails'
然后你應該能夠在你的 app/assets/stylesheets/application.scss
@import "bootstrap";
編輯:
抱歉,為了添加 bootstrap-icon 部分,您app/assets/stylesheets/application.scss還需要匯入 bootstrap-icon css。您可以在匯入時參考 CDN,也可以將 css 放在您的/vendor檔案夾中并在匯入時參考相對路徑。
這是app/assets/stylesheets/application.scss使用CDN的方法
@import "bootstrap";
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
然后,您可以將圖示添加到您的視圖頁面。
此代碼在我home.html.erb的身上并呈現藍色鬧鐘。
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
uj5u.com熱心網友回復:
請參閱 Joe Thor 的第一條評論,這為我的設定中出現的問題添加了解決方法。對我有用的是添加:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
并application.html.erb使用建議的語法:<i ></i>.
語法<%= icon("bootstrap", class: "text-success") %>看起來node-modules/…沒有安裝,所以會出錯。這是我一直使用的語法。更多的鐵路。
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");inapplication.scss由于某種原因不起作用,盡管它似乎應該這樣做。
通過混合 svg 圖示和字體來獲得“圖示”,Boostrap 似乎無濟于事。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/417639.html
標籤:
