2023-01-09 – 已解决
我开始使用默认的 Rails 模板,现在我想将 Bootstrap v5.1 与 Rails 一起使用。我已删除 Importmap-Rails 并继续添加 JSBundling-Rails 和 CSSBundling-Rails。样式工作正常,但 Bootstrap JavaScript 命令似乎都不起作用。我做错了什么?
rails new
rails new Xyz --css=bootstrap --javascript=esbuild && cd Xyz/ && ./bin/setup && git add . && git commit -m "initial commit"
rails generate controller Articles &&
echo "hello world" > app/views/articles/index.erb &&
sed -i '' -e 's/# root "articles#index"/root "articles#index"/g' config/routes.rb &&
git add . && git commit -m "generates Articles controller"
将默认引导导航添加到此文件: 2023-01-09 – 已解决----这是旧的 Bootstrap 4 标记,这就是为什么它对我不起作用
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
破坏和设置
rake assets:clobber && ./bin/setup && yarn install && bundle install
然后运行
./bin/dev
结果:(没有js交互工作)
我在让 Bootstrap 5.1.3 javascript 在 Rails 7.0.2.4 中工作时遇到了一些重大问题。工具提示和下拉菜单是断断续续的。
首先始终使用 bin/dev 来启动开发中的 Rails 服务器(而不是
rails server
命令)。
为了让 javascript 功能重新回到我的 Rails 7 应用程序中,我必须做的是进入
app/javascript/application.js
并更改它
import "@hotwired/turbo-rails"
到此
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
一切都开始按预期进行!
rake assets:clean
rake assets:clobber
rake tmp:clear
从 Importmap 迁移到 JSBundling + CSSBundling 时,请确保删除残留文件。删除
config/importmap.rb
和 bin/importmap
。
还会有一些包含 Hotwire Turbo 和 Hotwire Stimulus 的残余物。如果您不打算使用它们,请删除
app/javascript/controllers
并清除 app/javascript/application.js
内部的线条。如果万一您需要 hotwire 库,请首先将 jsbundling-rails 和 cssbundling-rails 添加到 Gemfile 中。首先使用 rails javascript:install:[esbuild|rollup|webpack]
和 rails css:install:bootstrap
完成设置
bin/dev
可能存在一些冲突,但我没有注意到任何不同。因此,您可以丢弃或保留文件的冲突版本。
大多数必需的文件将自动生成,并且行会自动附加到预先存在的文件中,但如果 Bootstrap v5.1 仍然无法在使用 JSBundling 和 CSSBundling 的 Rails 中工作:
确保:
import * as bootstrap from "bootstrap"
已添加到
app/javascript/application.js
文件中。
查看
app/assets/stylesheets
是否有*.scss
(可以是application.bootstrap.scss
或application.scss
,只要package.json
提供相同的名称就可以),里面的内容是:
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
在
app/assets/config/manifest.js
文件中,确保包含构建目录:
//= link_tree ../images
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
// Add the line below, with the double slashes and equal sign, followed by spaces.
//= link_tree ../builds
不要忘记将资源包含在
assets.rb
文件中。下面的评论中提到了如何设置相同的内容。
确保您在 Bootstrap 5 中使用正确的标记。Bootstrap 4 标记将不起作用。 具体来说,查找下拉元素的数据属性更改为:
:data => { "bs-toggle" => "dropdown"}
就我而言是
import "@hotwired/turbo-rails"
导致了这个问题,所以我添加了 html 元素
data-turbo="false"
ie
<li class="nav-item dropdown" data-turbo="false">
通过这个我的下拉菜单工作了,之前就崩溃了