Laravel Mix doesn't include bootswatch in app.css bundle

Question

I'm trying to include the bootswatch flatly theme in my laravel/react project and no matter what I do, the bootswatch css doesn't end up in the public/app.css file as I'd expect.

I ran npm i bootswatch and I've verified that I have bootswatch: ^4.4.1 in my package.json file. I have also run npm install.

I also ran these commands when initially setting up the project:

composer require laravel/ui
php artisan ui bootstrap
php artisan ui react

app.scss

Per the docs you set up the imports like this:

@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/flatly/bootswatch";

webpack.mix.js

mix.react('resources/js/app.js', 'public/js').extract('jquery');
mix.sass('resources/sass/app.scss', 'public/css');
mix.styles('resources/css/custom.css', 'public/css/custom.css');

if (mix.inProduction()) {
   mix.version();
}

app.blade.php

<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/custom.css') }}" rel="stylesheet">

When I open up the app.css file in a new tab and search for bootswatch I come up with nothing and the styles aren't being applied to the page. What am I missing?

I've cleared the cache and also run php artisan cache:clear, although not sure that applies. Pretty much trying anything and everything at this point.

Bootstrap css is getting included in the public/css/app.css file.

Did you compile your assets afterwards? `npm run dev` or `npm run watch`? Can't see that step here — brombeer, Jan 25 '20 at 18:52
because app.css is being overwritten everytime you call npm run watch or dev, you have to call bootswatch inside app.scss — DutchPrince, Jan 25 '20 at 19:27

score 0 · Answer 1 · answered Jan 26 '20 at 11:40

The answer was to comment out this line in the app.scss file that Laravel generates:

//@import 'variables';

It seems that it was interfering with adding the bootswatch styles, or overwriting them, even though it was getting included first in the app.scss file, which would make me think it would be overridden by anything that was added after.

Laravel Mix doesn't include bootswatch in app.css bundle

1 Answers1