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

Question

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

NPM 下载的文件

代码

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

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

Answer 2

已解决

我将此代码添加到 require('bootstrap');

下的 bootstrap.js

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

现在一切正常。希望对其他人有帮助。

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

Adding datatable to laravel mix files

datatables

npm

laravel

laravel-mix

NPM 下载的文件

代码

已解决