Laravel项目npm run build后DataTables分页链接Bootstrap5样式丢失

问题现象 #

使用DataTables.js + Vite + Laravel + 原生JS开发时，npm run dev开发环境下DataTables的上一页、下一页等分页元素Bootstrap5样式正常，但执行npm run build打包后样式丢失，重新运行npm run dev样式又恢复。

已执行的操作：

• 在AppServiceProvider的boot方法中添加了Paginator::useBootstrapFive();
• 删除并重新安装过node_modules依赖

当前配置代码 #

AppServiceProvider代码 #

public function boot(): void
{
    JsonResource::withoutWrapping();
    Paginator::useBootstrapFive();
}

app.scss配置 #

@import "./variables.scss";
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.css";
@import "../../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css";

app.js配置 #

import "../css/app.scss";
import "bootstrap";
import "./bootstrap";
import "../../node_modules/jquery/dist/jquery.min.js";
import "../../node_modules/datatables.net/js/jquery.dataTables.min.mjs";
import "../../node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.mjs";
import 'datatables.net-plugins/api/sum().mjs';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-staterestore-bs5';

解决步骤 #

1. 修正CSS导入路径（遵循Vite规范） #

Vite支持直接通过包名导入依赖，避免相对路径在生产打包时解析出错。修改app.scss：

@import "./variables.scss";
// 用包名直接导入，替代相对路径
@import "bootstrap/scss/bootstrap.scss";
@import "bootstrap-icons/font/bootstrap-icons.css";
@import "datatables.net-bs5/css/dataTables.bootstrap5.css";

2. 调整JS导入顺序与全局挂载 #

确保jQuery先于DataTables导入，并挂载到全局对象，避免DataTables找不到jQuery实例。修改app.js：

import "../css/app.scss";
// 先导入jQuery并全局挂载
import $ from "jquery";
window.$ = window.jQuery = $;

import "bootstrap";
import "./bootstrap";
// 用包名导入DataTables核心及Bootstrap5适配
import "datatables.net/js/jquery.dataTables.min.mjs";
import "datatables.net-bs5/js/dataTables.bootstrap5.min.mjs";

// 其余插件保留原导入方式
import 'datatables.net-plugins/api/sum().mjs';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-staterestore-bs5';

3. 检查Vite配置（确保资源打包正常） #

确认vite.config.js中正确配置了输入文件，Laravel默认配置即可，示例：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

4. 强制清理缓存 #

打包完成后，清理浏览器缓存，同时执行Laravel缓存清理命令：

php artisan optimize:clear

5. 显式指定DataTables初始化样式 #

初始化DataTables时，明确配置分页相关参数，确保强制使用Bootstrap5样式：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        pagingType: "full_numbers",
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
             '<"row"<"col-sm-12"tr>>' +
             '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
        language: {
            paginate: {
                first: "首页",
                last: "末页",
                next: "下一页",
                previous: "上一页"
            }
        }
    });
});

内容的提问来源于stack exchange，提问作者Zuby