CSS import into another CSS and laravel mix

Question

CSS import into another CSS and laravel mix

Navigation

#1 by (1 votes)

1

I am uploading a template for the administrator area and it turns out that the css matrix style.css in its code has an import of other css that I also have, the problem is that I do not load those css and I do not understand how to include them within Laravel Mix, then I show you how I have organized the assets.

Assets folder

Style.css has the following (which is where I get the problem even if I fix the routes 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 that 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'm using version 5.6)

laravel laravel-5 webpack laravel-mix

asked by Felipe 04.04.2018 в 04:26

source

1 answer

Save record in the database with ajax? Searching for a surname in a field with 2 surnames in Mysql

score 1 · Accepted Answer

The error you are making is that you try to import CSS files that are in a non-public folder (resources / assets / template / back / css / ....), and the browser tries to find those files with relative routing, and that's why he just can not find them.

From what I see, I think it's not necessary to use all those import in style.css if you want to put the content of all those files in one (all.css).

What you can do is make copy all those files (in the order you need) in a single CSS file, in fact currently you do but partially:

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/icons/simple-line-icons/css/simple-line-icons.css',
'resources/assets/template/back/css/icons/weather-icons/css/weather-icons.min.css',
'resources/assets/template/back/css/icons/linea-icons/linea.css',
'resources/assets/template/back/css/icons/themify-icons/themify-icons.css',
'resources/assets/template/back/css/icons/flag-icon-css/flag-icon.min.css',
'resources/assets/template/back/css/icons/material-design-iconic-font/css/materialdesignicons.min.css',
'resources/assets/template/back/css/spinners.css',
'resources/assets/template/back/css/animate.css',
'resources/assets/template/back/css/style.css'
], 'public/css/all.css');

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 sources and I suppose your custom css.