How to get bootstrap-select css into Laravel public folder

Question

I installed bootstrap-select package using npm. I can see that in node-modules dir of my Laravel project.

I have added following entry to master.blade.php:

<link rel="stylesheet" href="{{ asset('css/bootstrap-select.css') }}">

However when I run php artisan serve on my local machine, and go to browser I can see following error in the console:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap-select.css, line 0) http://127.0.0.1:8000/css/bootstrap-select.css

I am using Laravel Framework 5.7.28

Any clues much appreciated!

Script47 · Accepted Answer · 2019-03-21 09:30:37Z

2

As per this comment, you need to link the CSS file in your app.scss using the following syntax:

@import "~module-name/path/to/css.css";

then fire npm run dev which should compile your assets again. Also:

The tilde (~) tells Webpack that we're not looking for that jquery.filer.css file relatively to app.scss. Instead, we want to look within node_modules.

It will compile everything into a single app.css file which you can then include, no need to individually load the bootstrap-select.css file.

edited Mar 21, 2019 at 9:30

answered Mar 21, 2019 at 9:26

Script47

14.6k4 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

apokryfos Over a year ago

When doing this then you will need to include app.css and not bootstrap-select.css since this will bundle them all together

Script47 Over a year ago

@apokryfos yep, I thought that was clear but I'll clarify, thanks.

Akshay Lokur Over a year ago

Thanks will give this a try. BTW I forgot to ask about bootstrap-select.js file. Will that be handled something similarly?

Script47 Over a year ago

@AkshayLokur IIRC, your need to require the JS file into resources\assets\js\app.js and then run npm run dev to regenerate your app.js which should now include your bundled app.js with the bootstrap-select JS file..

Akshay Lokur Over a year ago

@Script47: Great after following your instructions, 404 error is gone; BUT now I can't see the dropdown menus which were styled using "bootstrap-select" and also the JS function "selectpicker()" seems to be unavailable. After Googling a bit, folks say JQuery should load before "app.js". Any clue if this what I need to ensure and where this ordering happens? Sorry it may be a very rookie question but Laravel is overwhelming to start with!

|

Collectives™ on Stack Overflow

How to get bootstrap-select css into Laravel public folder

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related