upgraded from Bootstrap 3 to `"bootstrap": "^5.3.3"`. and removed `bootstrap-sass`

I recently upgraded from Bootstrap 3 to "bootstrap": "^5.3.3". As I understand, bootstrap-sass ("bootstrap-sass": "^3.3.7") is no longer needed in Bootstrap 5, so I removed it and made the following changes:

Replaced:

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

with:

@import '~bootstrap-icons/font/bootstrap-icons.css';
@import '~bootstrap/scss/bootstrap';

Replaced:

require('bootstrap-sass');

with:

require('bootstrap');

However, after removing bootstrap-sass, the UI of DataTables is completely breaking. The layout and styling are not being applied properly.

Has anyone encountered this issue or have suggestions on what I can do to resolve it? Could there be something missing after the removal of bootstrap-sass that's causing this problem?

Thanks!

RemiM

1 year ago

Level 16

I’ve prepared a complete setup for you that should work, as it does on my local environment.

1. Remove existing packages for a fresh install:

npm uninstall bootstrap
npm uninstall bootstrap-sass
npm uninstall sass
npm uninstall datatables.net

2. Install the required packages:

npm install bootstrap@latest jquery@latest datatables.net-bs5@latest

3. Install the specific Sass version to prevent warnings in development:

npm install -D [email protected] --save-exact

4. Your package.json should look like this:

"devDependencies": {
    ...
    "sass": "1.77.6",
    ...
},
"dependencies": {
    "bootstrap": "^5.3.3",
    "datatables.net-bs5": "^2.2.2",
    "jquery": "^3.7.1"
}

5. Create a folder for Sass inside resources and a file named app.scss. Add the following to app.scss:

@use "bootstrap";

6. In your app.js, include the following:

import "./bootstrap";
import "../sass/app.scss";
import * as bootstrap from "bootstrap";

import jQuery from "jquery";
window.$ = jQuery;

import "datatables.net-bs5";

7 - Update your vite.config.js to include the Sass and JS files in the input array:

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

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

8. In your Blade view, use the following to initialize the DataTable:

...
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
...
<script type="module">
    $('#myTable').DataTable();
</script>
...
<table id="myTable" class="table table-striped" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

Let me know if you need any further clarification!