导入Bootstrap时抛出异常：Rails项目配置问题求助

Hey Avin, let's figure out why that Bootstrap import is throwing an error in your Rails app. I’ve debugged this exact issue a bunch of times, so here’s what you need to check step by step:

1. Make Sure You Have All Required Dependencies in Your Gemfile #

Bootstrap 4+ relies on jQuery and Popper.js to work properly, and just adding gem 'bootstrap' isn’t enough. Update your Gemfile to include these:

gem 'bootstrap'
gem 'jquery-rails'
gem 'popper_js'

Run bundle install after saving the Gemfile—missing these dependencies is one of the most common causes of this import error.

2. Fix Your Stylesheet File (and Its Name!) #

First, double-check the filename: you mentioned trying to rename it to applicaiton.scss—that’s a typo! It needs to be application.scss (note the correct "c-a-t-i-o-n" spelling) in the app/assets/stylesheets/ directory.

Next, clean up the file to avoid conflicts. Remove any default Rails comments or other imports temporarily, leaving only:

@import "bootstrap";

Also, ensure the file doesn’t have a .css extension (like application.css.scss is okay, but application.css will prevent Sass from processing the import).

3. Update Node.js and Set Up Yarn #

Node.js 8 is end-of-life and might not play nice with modern Bootstrap dependencies. Upgrade to at least Node.js 14.x (LTS version) if you can—this alone fixes a lot of hidden compatibility issues.

Then, make sure Yarn is installed (Rails uses Yarn to manage JavaScript dependencies for Bootstrap):

npm install -g yarn

Run yarn install in your app’s root directory to pull in the required JS packages (like Popper.js and jQuery) that the Bootstrap gem depends on.

4. Configure Your JavaScript Asset Pipeline #

Open app/assets/javascripts/application.js and make sure you’re loading the dependencies in the correct order (jQuery first, then Popper, then Bootstrap):

//= require jquery3
//= require popper
//= require bootstrap
//= require turbolinks
//= require_tree .

The order matters here—Bootstrap needs jQuery and Popper loaded first to initialize properly.

5. Clear Your Asset Cache and Restart the Server #

Rails caches assets aggressively, so old cached files might be causing the error. Run these commands to clear everything:

rails assets:clobber
rails assets:precompile RAILS_ENV=development

Don’t forget to restart your Rails server after running these—changes won’t take effect until you do.

6. Verify Your Stylesheet Tag #

The line you have in your HTML:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

is totally correct, but just make sure there are no duplicate stylesheet tags pointing to other files that might conflict with Bootstrap.

After working through these steps, reload your app—this should resolve the import error you’re seeing.

内容的提问来源于stack exchange，提问作者Avin Kavish