如何在Rails应用中通过Webpacker配置Bootstrap自定义变量

Hey there! Let's get your custom Bootstrap variable working properly. I've tackled this exact issue a few times, so here's a clear, step-by-step solution based on what you've already done:

First, Confirm Your Existing Setup (And Fix Small Gaps) #

You've already checked off these steps:

• Created your Rails app with Webpacker: rails new testapp --webpack
• Moved into the project directory: cd testapp
• Installed Bootstrap via Yarn: yarn add bootstrap
• Set up core files in app/javascript/packs:
  • application.js: import 'bootstrap'
  • vendor.scss: @import 'custom'; @import '~bootstrap/dist/css/bootstrap';
  • custom.scss: $brand-success: red !default;

Step 1: Install Missing Dependencies #

Webpacker needs extra packages to process SCSS correctly, and Bootstrap requires a tooltip/popover dependency:

# For SCSS compilation
yarn add sass sass-loader
# Bootstrap 5 requires this (use `popper.js` instead for Bootstrap 4)
yarn add @popperjs/core

Step 2: Fix SCSS Import Paths #

The most common snag here is incorrect file referencing. Since custom.scss lives in the same folder as vendor.scss, use a relative path to ensure Webpack finds it:

// app/javascript/packs/vendor.scss
@import './custom'; // Add ./ to reference the same directory
@import '~bootstrap/dist/css/bootstrap';

Step 3: Update Webpacker Configuration #

To make sure Webpack processes your SCSS correctly and respects variable loading order, edit config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const path = require('path')

// Grab the existing Sass loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderOptions = sassLoader.use.find(loader => loader.loader === 'sass-loader').options

// Optional: Add an alias to simplify future imports (avoids path confusion)
environment.resolve.alias = {
  'styles': path.resolve(__dirname, '../app/javascript/packs')
}

// Ensure Webpack recognizes Bootstrap's tilde-based imports
sassLoaderOptions.sassOptions = {
  includePaths: ['node_modules']
}

module.exports = environment

Step 4: Import Your SCSS in the Application Entry #

Make sure your application.js pulls in your SCSS so it gets compiled with the rest of your assets:

// app/javascript/packs/application.js
import 'bootstrap'
import './vendor.scss' // Add this line to import your custom SCSS

Step 5: Test and Verify #

1. Restart your webpack dev server (critical for config changes to take effect):

   bin/webpack-dev-server
   

2. Add a test element to one of your views (e.g., app/views/home/index.html.erb):

   <button class="btn btn-success">Test Success Button</button>
   

3. Start your Rails server: rails s and visit the page — your button should be bright red, confirming your $brand-success variable is working!

Troubleshooting Common Issues #

• Variable not overriding? Double-check that custom.scss is imported before Bootstrap's CSS. Loading order is make-or-break here.
• SCSS compilation errors? Confirm all file paths are correct and you've installed sass and sass-loader.
• Bootstrap JS not working? Verify you've installed @popperjs/core (or popper.js for Bootstrap 4) and that import 'bootstrap' is present in application.js.

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