Laravel - Add custom styling to the existing app.scss

Question

I'm new to Laravel and I've read a few other questions on Stackoverflow about adding custom styling to Laravel.

The reason I'm creating a new stackoverflow question is because Laravel seems to compile a single app.css, that also loads bootstrap. I think this is created by running npm run dev, which compiles the app.scss in the resources sass folder.

In that given file bootstrap is loaded by @import '~bootstrap/scss/bootstrap'; I'd like to follow this principle too with my own custom styling, so that I get something along the lines of @import '~mywebsite.css';

This way I'd end up with a single .css file which I think is far more eloquent.

What's the appropriate way to go about this? Additionally, where is this 'bootstrap' styling located that is being imported? I fail to understand where '~' is located.

Last but not least, is it possible to use the same approach for the app.js file?

With much regards,

• Chuck

Answer 1

you can create a new sass file in /resources/sass for example _test.sass and put the import in the app.sass like this:

@import 'test';

and compile with npm run dev or npm run watch

if you need create a new file in your public folder you can create a new sass file (example.sass) and then change the webpack.mix.js file and put your new css line like this:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sass('resources/sass/example.scss', 'public/css'); 

and compile with npm run dev.

regards!