Laravel Mix Does Not Pull In CSS

Did you run:

npm run prod

https://laravel.com/docs/8.x/mix#running-mix

Did you validate that you actually had a public/css/default.css file? If you have one, open your devtools and check your "Sources" tab. Open the css  folder and click on default.css, do you see all your CSS classes (use Cmd + F to search)? Else, what do you see?

@piljac1 Yup, my default css is there when under sources, also under source code. However, app.css is empty. @jlrdw at the moment I am using npm run dev only because I know that works in my production system which is local.

@vincej so which one is missing the default.css or the app.css?

post your mix.js

@lemmon default is missing. I have no idea why app.css is empty, but that seems to be common amongst what I have seen and read. Thanks.

In my local machine where the development was done I have:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

In the remote DigitalOcean server I have nothing /empty

Note: I do not use scss I just write raw css.

Also, note - in my dev machine my default.css is pulled in. I guess my remote machine mix is not configured properly. I have a thought that my error lies in that I have placed my default.css inside the public folder since I have never used Mix before. So, I am thinking that with Mix in place I now need to move my default.css into resources / css / default.css, and run dev???

resources/sass/app.scss

// Bootstrap
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

//or Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;


// or some include
@import 'components/dropdown';

// etc
.border-error {
    @apply
    border-red-500;
}

// or some css
@import url("../css/style.css");

@vincej

it is now looking in:

resources/sass/app.scss

and will compile whatever you have in there to public/css/app.css

based on your mix file and your app.scss file you posted that includes bootstrap

@vincej

or import it in your resources/sass/app.scss like:

// or some css
@import url("../css/default.css");

if default.css is located

'resources/css/default.css'

Ok, thanks I'll watch that - importing default.css into app.scss did not work, when I do a npm run dev I got. Note I do not see app.scss. Modifying my mix file does not work either:

 DONE  Compiled successfully in 9933ms                                  12:26:24

       Asset     Size   Chunks             Chunk Names
/css/app.css  178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

Thanks for not giving up on me. Tried that, and it had no affect. I have another idea. The sass file is compiling. Is there a reliable utility to convert css to sass, or do I have to do it manually?

Found one - I hope it works!!

mix.js(['resources/js/app.js', 'resources/js/functions.js'], 'public/js')
    .css('resources/css/default.css','public/css/');
    .sass('resources/sass/app.sass','public/css/');

If your default.css is vanilla css your mix should be

mix.js(['resources/js/app.js', 'resources/js/functions.js'], 'public/js')
    .styles('resources/css/default.css','public/css/');
    .sass('resources/sass/app.sass','public/css/');

Use mix helper in your view instead of assets

Thanks for that - I will update you tomorrow. Cheers

@apex1 Bravo!!! You will the golden crown of victory! I tried your first option, and nothing much changed, in the sense that everything worked but there was no compilation going on. So, on to option two - upgrade. Well that required the upgrading a various dependencies including node. But in the end it was all worth it. I tried in production and it minified my default css excellently. However, I still have one error coming through on the console.

Uncaught TypeError: Vue.component is not a function

There is a "solution" to it on Laracasts, but I am suspicious of it.

Also I notice, that where it did minify the default.css and app.js nevertheless, functions.js were not minified. Curious.

I still have an entirely different problem around CORs policy, but I will create a separate question for that. I am astounded that this question has needed 264 active views in order to arrive at a a solution. In the end the solution was standing in pain site. I am indebted to you. Thanks is not enough. Best answer applied.

Ok Fixed Vue error with in app.js:

import Vue from 'vue'
window.Vue = Vue;