4

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
Nikola Kirincic
  • 3,651
  • 1
  • 24
  • 28
Charles Lindbergh McGill
  • 83
  • 1
  • 9
  • 1
    ~ is in `node_modules` . Your styles will be in the same folder or possibly subfolders in assets so `@import 'filename.scss'` (for the same folder) or `@import 'subfolder/filename.scss'`) (for subfolders) should be enough. – apokryfos Feb 14 '19 at 14:26
  • So am I right to assume that the 'varables.scss' is not an example of how to place your own css? – Charles Lindbergh McGill Feb 14 '19 at 14:29
  • No it's not an example. It's just boilerplate on how you can compile and include bootstrap on your site using bootstrap-sass – apokryfos Feb 14 '19 at 14:32

1 Answers1

7

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!

Pablo Puente
  • 86
  • 2