Metronic Laravel Integration

Question

I am trying to integrate the metronic theme into my existing laravel project. I work in Laravel homestead structure.

I did the steps in the "https://keenthemes.com/metronic/?page=docs&section=laravel-integration" link one by one and I didn't get any errors. However, the /laravel/public/js/app.js and /laravel/public/js/app.css files that did not occur as mentioned in step 6 did not occur. What could be the reason for this?

My webpack.mix.js file content:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/call.js', 'public/js');
mix.js('resources/js/echo.js', 'public/js');

// copy images folder into laravel public folder
mix.copyDirectory('resources/demo1/src/assets/media', 'public/assets/media');

/**
* plugins specific issue workaround for webpack
* @see https://github.com/morrisjs/morris.js/issues/697
* @see https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module
*/
mix.webpackConfig({
   resolve: {
       alias: {
           'morris.js': 'morris.js/morris.js',
           'jquery-ui': 'jquery-ui',
       },
   },
});

Can you add the contents of your `webpack.mix.js` file to the question. — Remul, May 04 '20 at 12:36
Thank you. I added content webpack.mix.js file to my question. I'm looking forward to the solution — Hilal, May 04 '20 at 12:43
Check step 4 again, you are not compiling the css and js file at the moment: `mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')` is missing. — Remul, May 04 '20 at 12:47
I tried and run npm run dev code again. The file /laravel/public/js/app.js occurred, but the file /laravel/public/js/app.css did not occur. On the console it gave an error like: 95% emitting ERROR Failed to compile with 2 errors15:59:42 error in ./resources/sass/app.scss Module build failed: @import "bootstrap/scss/bootstrap"; File to import not found or unreadable: bootstrap/scss/bootstrap........ etc — Hilal, May 04 '20 at 13:11
Make sure the import for bootstrap is correct in `/laravel/resources/demo1/src/assets/sass/style.scss` — Remul, May 04 '20 at 13:37
You are right. in style.scss : import 'bootstrap/scss/bootstrap'; -> import '~bootstrap/scss/bootstrap'; I finally fixed it. Thank you very much. @Remul — Hilal, May 04 '20 at 13:47
can you mention the metronic version you are using ? i am actually facing some issues too in integration V7.0.0 demo2 — RazaUsman_k, May 13 '20 at 21:47

score 0 · Accepted Answer · answered May 04 '20 at 13:55

You forgot to compile the sass and js files mentioned in step 4.

Add the following to your webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

To fix the issue with bootstrap you have to make sure the import path is correct:

Change the following in resources/demo1/src/assets/sass/style.scss:

import 'bootstrap/scss/bootstrap';

to

import '~bootstrap/scss/bootstrap';

Metronic Laravel Integration

1 Answers1