Frytea's Blog ·

Rails 7 已有项目引入 Bootstrap 3

💡 原文中文，约4900字，阅读约需12分钟。

📝

内容提要

在 Rails 7 中，新项目可直接使用 esbuild 和 Bootstrap。已有项目需安装 cssbundling-rails 和 jsbundling-rails，配置文件以处理 JavaScript 和 CSS 依赖，确保路径正确。最后启动项目并进行调试。

🎯

在 Rails 7 中，新项目可直接使用 esbuild 和 Bootstrap。
已有项目需安装 cssbundling-rails 和 jsbundling-rails。
安装 cssbundling-rails 后会创建 builds 文件夹并链接，删除 application.css 文件，添加 package.json 文件。
安装 jsbundling-rails 后会检查 builds 文件夹，添加 javascript_include_tag 到应用程序布局文件。
解决 esbuild 构建错误需使用相对路径导入控制器。
安装 turbo-rails 和 stimulus 包以修复导入路径问题。
在应用程序布局文件中删除不再需要的 javascript_importmap_tags。
安装 Bootstrap 3 和 jQuery 的步骤，创建 add_jquery.js 文件并在 application.js 中引入。
使用 bin/dev 启动项目并链接 debugger 进行调试。

🔎

在已有项目中引入 Bootstrap 3 时，需特别注意版本兼容性。默认安装的是最新版本，若需要使用旧版本，需明确指定版本号。此外，确保在配置文件中正确引入 Bootstrap 的 CSS 和 JS 文件，以避免样式和功能上的问题。

在使用 esbuild 进行构建时，常见的路径问题可能导致构建失败。确保在导入控制器时使用相对路径，如 './controllers'，而不是简单的 'controllers'。此外，安装 turbo-rails 和 stimulus 包可以帮助解决与导入路径相关的冲突。

使用 bin/dev 启动 Rails 项目时，系统会自动监控 CSS 和 JS 文件的更改。这意味着在开发过程中，任何对文件的修改都会实时反映在浏览器中，极大提高了开发效率。确保在启动前完成所有依赖的安装和配置，以避免启动失败。

❓

需要安装 cssbundling-rails 和 jsbundling-rails，配置相关文件后，启动项目进行调试。

会创建 builds 文件夹，删除 application.css 文件，并添加 package.json 文件来存储 JavaScript 依赖项。

使用相对路径导入控制器，例如将 'controllers' 改为 './controllers'。

使用命令 'yarn add bootstrap@3' 和 'yarn add jquery'，然后在相应的 JavaScript 文件中引入。

使用命令 'bin/dev' 启动项目，并使用 'rdbg --attach' 进行调试。

安装 jsbundling-rails 后，会检查 builds 文件夹并添加 javascript_include_tag 到应用程序布局文件。

🏷️