I'm loading a template for the administrator area and it turns out that the style.css matrix css in its code has import from other css that I also have, the problem is that those css are not loaded and I don't understand how to include them within Laravel Mix, Next I show you how I have organized the assets.
Assets folder
Style.css has the following (which is where I get the problem even though I fixed the paths by removing scss etc)
@import url(../icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic-
font/css/materialdesignicons.min.css);
@import url("https://fonts.googleapis.com/css?
family=Poppins:300,400,500,600,700");
@import url(css/spinners.css);
@import url(css/animate.css);
Webpack.mix.js
mix.styles([
'resources/assets/template/back/css/style.css',
'resources/assets/template/back/css/colors/blue.css',
'resources/assets/template/back/css/icons/font-awesome/css/font-awesome.css',
'resources/assets/template/back/css/spinners.css',
'resources/assets/template/back/css/style.css'
], 'public/css/all.css')
.scripts([
'resources/assets/template/back/js/jquery.slimscroll',
'resources/assets/template/back/js/waves.js',
'resources/assets/template/back/js/sidebarmenu.js',
'resources/assets/template/back/js/sticky-kit-master/dist/sticky-kit.min.js',
'resources/assets/template/back/js/sparkline/jquery.sparkline.min.js',
'resources/assets/template/back/js/dashboard2.js',
'resources/assets/template/back/js/custom.js',
'resources/assets/template/back/js/styleswitcher/jQuery.style.switcher.js'
], 'public/js/all.js')
.js(['resources/assets/js/app.js'],'public/js/app.js');
And this is the error it gives me when loading the backend template
How can I solve this? I know it's basic but it's my first project in Laravel (I use version 5.6)
The mistake you're making is that you're trying to import CSS files that are in a non-public folder (resources/assets/template/back/css/....), plus the browser is trying to find those files with relative routing, so just can't find them.
From what I see, I think it is not necessary to use all those import in style.css if what you want is to put the content of all those files in one (all.css).
What you can do is copy all those files (in whatever order you need) into a single CSS file, in fact you currently do but partially:
I know that the routes shown here do not match yours, but it is to show you the example, in the style.css file you can leave the import of the google fonts and I guess your custom css.