How to configure the webpack file in Laravel?

Question

How to configure the webpack file in Laravel?

Navigation

#1 by (3 votes)

0

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

At 9 minutes and 45 seconds of video.

Using Vue.js in a Laravel application

At 8 minutes and 12 seconds of the video.

1 - CRUD at LARAVEL & VUEjs - Webpack, Laravel Mix, NPM, Axios | Rimorsoft Online

At 4 minutes 36 seconds of video

CRUD with Vue JS

I know that you have to set up the vuejs and bootstrap files directly on the page, but I would like to configure the webpack.mix.js file in css and Javascript, webpack.mix.js will be set up for the whole project;

I tried it that way, but it did not work, I tried the video tutorials, but I did not succeed either, I accepted 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');

vue.js laravel webpack

asked by anonymous 12.10.2017 / 15:39

1 answer

Incorrect count of $ _FILE fields Dialog can not be applied

score 3 · Accepted Answer

Try this out

Inside the file 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');

At the end of everything you go there in console and run the command:

npm run dev

Ready, both are in public of Laravel, ready to use in projects ...

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