Adding datatable to laravel mix files

问题

I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js

Downloaded files by NPM

Code

my webpack.mix.js

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

    //laravel default to make app.css and app.js
    // I want add Datatables to these files
    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css');

    //my template files
    mix.combine([
       'public/theme/primary/js/jquery.min.js',
       'public/theme/primary/js/popper.min.js',
       'public/theme/primary/js/bootstrap.min.js',
       'public/theme/primary/js/uza.bundle.js',
       'public/theme/primary/js/default-assets/active.js'
    ], 'public/js/combined.js');

Any idea?

回答1:

Solved

I added this code to my bootstrap.js under require('bootstrap');

 require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
 require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );

and then added styles to my app.scss

@import '~datatables.net-bs4/css/dataTables.bootstrap4.css';

Everything works perfectly now. Hope it help others.

回答2:

To combine multiple scripts and styles you can do it this way:

mix.scripts([
   'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
   'resources/js/app.js'
])
.styles([
   'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
   'resources/sass/app.scss'
]);

This by default should create all.js and all.css files in the respective js and css public folders.

来源：https://stackoverflow.com/questions/55016159/adding-datatable-to-laravel-mix-files