How to configure the webpack file in Laravel?

Asked

Viewed 656 times

0

I’m following several tutorials as you can see below;

At 9 minutes and 45 seconds of video.

Using Vue.js in an Laravel application

At 8 minutes and 12 seconds of video.

1 - CRUD en LARAVEL & Vuejs - Webpack, Laravel Mix, NPM, Axios | Rimorsoft Online

At 4 minutes 36 seconds of video

CRUD with Vue JS

I know you have to configure the vuejs and bootstrap files directly on the page, but I would like to configure in the file webpack.mix.js css and Javascript, because configuring in webpack.mix.js will be configured for the entire project;

I tried this way, but it didn’t work, I tried through the video tutorials, but also did not succeed, I accept suggestions;

mix.js(
  'resources/assets/js/app.js',
  ''
   'public/js')
   .sass(
     'resources/assets/sass/app.scss',
     '../../../node_modules/bootstrap/dist/css/bootstrap.css'
      'public/css');
laravel vue.js webpack

  • I would recommend you do not use Vue integrated this way with the Laravel, I suggest you read this article which explains very well why.

1 answer

3


Try it this way

Inside the archive ressources/sass/app.scss you import the bootstrap:

// Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap.scss';

In webpack.mix.js you write like this:

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

There at the end of everything you go there on console and rotate the remote:

npm run dev

Okay, you’re both in public Laravel, ready for you to use in the projects...

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

Browser other questions tagged laravel vue.js webpack

You are not signed in. Login or sign up in order to post.