bhojkamal's avatar

How to import fontawesome to app.scss for vite webpack environment

Hello developers,

Before with laravel-mix, it was working like this perfectly in /resources/sass/app.scss but with vite it is not working.

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';

// Font Awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";

Now, for vite, I changed to this in /resources/sass/app.scss. bootstrap and admin-lte are working but fontawesome is not working.

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

// Variables
@import 'variables';

// AdminLTE
@import '/node_modules/admin-lte/dist/css/adminlte.css';

// Bootstrap
@import '/node_modules/bootstrap/scss/bootstrap';

// Font Awesome
@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "/node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";

For font awesome with and without /node_modules/ is not working.

In vite.config.js -

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

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

on Blade this -

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

and I'm wondering how to include both scss and js in one app.js as I've read it can be included in one file. Thanks.

0 likes
6 replies
bhojkamal's avatar
bhojkamal
OP
3 years ago
Best Answer
Level 1

Update.

It worked by following for scss and css.

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
// Bootstrap
@import '/node_modules/bootstrap/scss/bootstrap';

// AdminLTE
@import '/node_modules/admin-lte/dist/css/adminlte.css';

// Font Awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";

But js of admin-lte is now working. I've used used as follow. in bootstrap.js

import _ from 'lodash';
window._ = _;

try {
    window.Popper = require('popper.js').default;
    // window.$ = window.jQuery = require('jquery'); // not needed
    require('bootstrap');
    require('admin-lte');
} catch (e) { }

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

before it was working perfectly with laravel-mix but with new default compiler vite, it is not working. My click function is now working on any on my admin panel.

Anyone recently working with admin-lte for admin panel in laravel-9 with vite default webpack compiler. I will appreciate.

Thanks.

5 likes
oliver-modernmc's avatar

@bhojkamal Kindly update your code from that to this

import _ from 'lodash';
import Popper from 'popper.js';
import $ from 'jquery';
import 'bootstrap';

window._ = _;

// Attach them to the global `window` object if needed
window.Popper = Popper;
window.$ = window.jQuery = $;

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Please or to participate in this conversation.