不使用gem在Rails 5中集成Bootstrap SASS遇CSS加载问题求助

Hey there, let's work through this Bootstrap SCSS integration issue without relying on the gem. I've tackled similar setups before, so here's a step-by-step breakdown to get your CSS loading properly:

First, double-check that your vendor directory is organized correctly so Rails can locate the SCSS files. Your setup should look something like this:

vendor/assets/
  stylesheets/
    bootstrap/
      scss/
        _variables.scss
        _mixins.scss
        bootstrap.scss  // Bootstrap's main entry file
        // All other Bootstrap component SCSS files (like _buttons.scss, _grid.scss)
    historical-bs-custom.scss  // Your custom styles/variables

Rails automatically includes vendor/assets/stylesheets in its asset path, but if you've modified your asset config, confirm this line exists in config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets')

Since you want to use custom Sass variables to override Bootstrap's defaults, your import order matters a lot. Bootstrap uses !default flags on its variables, so you need to load your custom file first to overwrite those defaults before Bootstrap loads. Update your application.css.scss to:

// Load your custom variables/rules first to override Bootstrap defaults
@import "historical-bs-custom";
// Then load Bootstrap's main SCSS entry file
@import "bootstrap/scss/bootstrap";

Double-check that the path to bootstrap.scss matches your directory structure. If you placed Bootstrap's SCSS files directly in vendor/assets/stylesheets/bootstrap/ (not nested in a scss subfolder), adjust the import to @import "bootstrap/bootstrap";.

This is a common gotcha! Your sass-rails ~> 5.0 uses Ruby Sass, which has been deprecated and doesn't support Bootstrap 4+. If you downloaded Bootstrap 4 or newer SCSS files, this will cause silent compilation failures (or errors in your server logs) that prevent CSS from loading.

To fix this:

1. Replace sass-rails in your Gemfile with sassc-rails (which uses LibSass, compatible with modern Bootstrap):

   # gem 'sass-rails', '~> 5.0'
   gem 'sassc-rails'
   

2. Run bundle install to update the gems.
3. Restart your Rails server.

If you're intentionally using Bootstrap 3, sass-rails 5.x is fine—skip this step.

Rails can hold onto old asset caches that cause weird loading issues. Run these commands to reset things:

rails assets:clean
rails assets:precompile  # Optional for dev, but helps catch compilation errors

Then restart your server.

In development mode, enable debug output to see exactly what's going wrong:

• Set config.assets.debug = true in config/environments/development.rb
• Open your browser's DevTools → Network tab, check if application.css loads successfully (look for 404 errors)
• Check the Console tab for Sass compilation errors (like missing files or undefined variables)

If you still run into issues with the vendor directory, try moving Bootstrap's SCSS files and your custom styles to app/assets/stylesheets instead. Rails prioritizes this directory by default, so the setup becomes more straightforward. Your structure would look like:

app/assets/stylesheets/
  bootstrap/
    scss/
      // Bootstrap SCSS files here
  historical-bs-custom.scss

Then keep the same import lines in application.css.scss.

内容的提问来源于stack exchange，提问作者Dick Kirkland