Laravel 5.6中如何通过npm将bootstrap-select的CSS合并到app.css？

Great question! Let’s break this down clearly—first off, you can’t properly merge styles by editing resource/assets/bootstrap.js or similar JS files. Those files are for loading JavaScript modules, and while you could technically import CSS in JS, Laravel Mix’s default setup would inject those styles dynamically via JS (instead of merging them into your app.css), which isn’t ideal for maintainability or performance.

Here are the two recommended, proper ways to handle this:

Option 1: Import Styles in Your Main Sass File (Preferred) #

If your project uses Sass (like the default resources/assets/sass/app.scss), this is the cleanest approach. Just add an import for bootstrap-select’s styles directly in your main Sass file:

// Add this to app.scss (ideally after Bootstrap's own styles)
@import "~bootstrap-select/dist/css/bootstrap-select";

The ~ is a webpack shortcut that points straight to your node_modules folder, so it’ll find the bootstrap-select styles automatically.

If bootstrap-select provides raw Sass source files (instead of pre-compiled CSS), you can import those instead—this lets you override any custom variables the library offers (if available):

// Optional: Override variables first (if the library supports it)
$select-primary-color: #your-custom-color;

// Import the raw Sass file
@import "~bootstrap-select/src/sass/bootstrap-select";

Run npm run prod afterward, and Mix will automatically merge these styles into your public/css/app.css.

Option 2: Add Styles via webpack.mix.js #

If you prefer managing styles through your Mix config, you can tell Mix to include bootstrap-select’s CSS in your compiled app.css:

mix.sass('resources/assets/sass/app.scss', 'public/css')
   // Merge bootstrap-select's CSS into your app.css
   .styles([
       'node_modules/bootstrap-select/dist/css/bootstrap-select.min.css'
   ], 'public/css/app.css');

This works well if you’re using pre-compiled CSS files directly, and Mix will bundle everything into the output file you specify.

To recap: Option 1 is the best practice because it integrates seamlessly with your existing Sass workflow and gives you more control if you need to customize styles.

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