register.blade.php and login.blade.php vue styles not applying

In the authentication chapter did you follow the instructions step by step. I followed step-by-step and everything works and it's styled correctly. The only thing I can think of is you missed some little bit of instruction somewhere.

Is your app.blade.php pulling in the style. Check, if it's not there just pull it in there.

Thanks for replying, I don't know exactly how to verify if it's "pulling in the style", but here's what's in my app.blade.php:

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

I've tried also forcing the css/app.css to check the public folder by putting: asset('/css/app.css') with the forward slash.

I'm wondering if it could possibly have something to do with my homestead.yaml: folders: - map: C:\webcode\perspectives to: /home/vagrant/Code

sites: - map: homestead.test to: /home/vagrant/Code/perspectives/public - map: laravel6.test to: /home/vagrant/Code/laravel6/public

I added the second mapping because I wanted a second database with the second project created in the tutorial. I previously had another mapped folder like so:

folders: - map: C:\webcode\perspectives to: /home/vagrant/Code/Perspectives -map: C:\webcode\perspectives\laravel6 to:/home/vagrant/Code/laravel6

I'm wondering if it's a stale data issue that's mucking up the compilation for npm run dev or something...

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

Yes that's what I meant.

If you right click login page, then view source, then look for app.css, click it, does the css file load showing the css.

You're right! The css didn't compile:

body { color: black; }

I don't know how to solve this though, if I look in my project folder the app.css appeared to compile totally fine: @import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";

/*!

• Bootstrap v4.4.1 (https://getbootstrap.com/)
• Copyright 2011-2019 The Bootstrap Authors
• Copyright 2011-2019 Twitter, Inc.
• Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */

:root { --blue: #3490dc; --indigo: #6574cd; --purple: #9561e2; --pink: #f66d9b; --red: #e3342f; --orange: #f6993f; --yellow: #ffed4a;

...

I'm thinking it's getting something from the first project I have where I didn't install vue auth, not sure how to verify this...

When I view app.js in my project:

/! no static exports found / /*/ (function(module, exports, webpack_require) {

webpack_require(/*! /home/vagrant/Code/laravel6/resources/js/app.js /"./resources/js/app.js"); module.exports = webpack_require(/! /home/vagrant/Code/laravel6/resources/sass/app.scss */"./resources/sass/app.scss");

However when I look at the page source version, it appears to point to my first project:

/! no static exports found / /*/ (function(module, exports, webpack_require) {

webpack_require(/*! /home/vagrant/Code/Perspectives/resources/js/app.js /"./resources/js/app.js"); module.exports = webpack_require(/! /home/vagrant/Code/Perspectives/resources/sass/app.scss */"./resources/sass/app.scss");

How does blade and/or webpack determine the path it uses for each of the projects? This appears to be my issue

Try downloading the bootstrap zip file, extract and rename to app.css. Place it in the correct folder and see if it works. Temp rename current app.css to app.bak

I did what you said, but that app.css (bootstrap renamed) in my /public folder of my project still isn't making it to my webpage; the websource is still just showing that css as:

body { color: black; }

It appears to be that webpack.mix.js is pulling in the folder path to compile from the wrong location using some sort of environment variable. i have no idea where, though...

Forget all about mix and compiling for a moment, just rename bootstrap.css to app.css, and figure out which folder it belongs in, so you can see the correct css.

Then go back and read the chapter on front end again. You probably missed some little detail.

Sorry if I wasn't clear before, I renamed app.css as app.bak, and bootstrap.css as app.css in the /public/css location as you suggested. When I view page source on the internet browser though, I'm still getting that very basic default css file (with color : black), and not the actual bootstrap.css contents

I'm still getting that very basic default css file ...

Okay locate that file and replace it with the correct one.

I searched my entire project, and root for that matter, and there's no css that matches that basic default one, it must be what's generated by default when the referenced css fails. The .js and .css appear to be attempting to reference relative to the root (parent) directory

I had the same issue what I did I create a folder by the name of bootstrap and put the css file and then linked it like below and commented this <link href="{{ asset('css/app.css') }}" rel="stylesheet">

 <link href="{{ asset('bootsratp/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">

It appears to be a problem with the environment variables laravel mix uses with subfolders: https://laracasts.com/discuss/channels/laravel/laravel-install-in-a-subfolder-the-compiled-javascript-and-css-with-version-method-cant-load-using-mix-function-in-blade

I've spent about 30 hours on this stupid problem. I have absolutely no idea where that default style is getting loaded in from because it's nowhere to be found in either of my projects. Does anyone know the location laravel stores the absolute final css that gets served up to the web browser?

The html is referencing:

But it's definitely not the .css in my public/css/app.css file, nor the post-compiled files in the storage folder

This is so insanely frustrating. My project folder has the publics/css/app.css compiled exactly how it's supposed to be. When I view the websource it only shows { color: black } which i can't find literally anywhere on my filesystem.

It's not ideal, but it gets the job done. Thanks!