I've been attempting to integrate the bootswatch flatly theme into my laravel/react project, but no matter what I do, the bootswatch css doesn't seem to make its way into the public/app.css file as expected.
After running npm i bootswatch, I confirmed that bootswatch: ^4.4.1 is listed in my package.json file. Additionally, I executed npm install.
Upon setting up the project initially, I ran the following commands:
composer require laravel/ui
php artisan ui bootstrap
php artisan ui react
app.scss
Following the instructions on the documentation, these are the import setups:
@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">
Even after inspecting the app.css file and searching for bootswatch, it seems that the styles aren't being applied to the page. What could be causing this oversight?
I've tried clearing the cache and executing php artisan cache:clear, although I'm uncertain if that is relevant. At this point, I am experimenting with different solutions.
Although Bootstrap css is successfully included in the public/css/app.css file.