将数据表添加到laravel混合文件

Question

我在datatables的帮助下用npm安装了this doc，现在我不知道如何将数据表css和js文件添加到我的app.css和app.js

Downloaded files by NPM

Code

我的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');

任何的想法？

Answer 1

要组合多个脚本和样式，您可以这样做：

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'
]);

默认情况下，应在相应的all.js和all.css公用文件夹中创建js和css文件。

Answer 2

Solved

我将此代码添加到bootstrap.js下的require('bootstrap');中

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

然后添加样式到我的app.scss

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

现在一切都很完美。希望它能帮到别人。