binggle's avatar

Vite import another css.

I installed laravel 9. it use Vite. and I am new to vite.

I want to use font-awesome css ( 4.7) and svelte in my new project.

this is package.json.

"scripts": {
    "dev": "vite",
    "build": "vite build"
},
"dependencies": {
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "font-awesome": "^4.7.0",
    "lodash": "^4.17.19"
},
"devDependencies": {
    "laravel-vite-plugin": "^0.2.1",
    "postcss": "^8.4.14",
    "svelte": "^3.48.0",
    "tailwindcss": "^3.1.4",
    "vite": "^2.9.11"
}

in ./resources/css/app.css

@import "node_modules/font-awesome/css/font-awesome.min.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

I run this

npm run dev

When I access project site, it shows error in browser

[plugin:vite:css] Failed to find 'node_modules/font-awesome/css/font-awesome.min.css'
  in [
    /home/workspace/blog/resources/css
  ]

// my www directory is /home/workspace/blog/

How can I import another css file correctly?

0 likes
5 replies
binggle's avatar

I found solution

in blade

@vite([ 'resources/js/app.js', 'resources/css/app.css', 'node_modules/font-awesome/css/font-awesome.min.css'])

in vite.config.js

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

export default defineConfig({
    plugins: [
        laravel([
            'node_modules/font-awesome/css/font-awesome.min.css',
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

No error, Icon displays correctly, even it is weird.

Niush's avatar

This should work I think:

@import 'font-awesome/css/font-awesome.min.css';
1 like
michael.carrier1978@gmail.com's avatar

If someone is still looking for help this finally worked for me.

I added @import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css'; to my app.css file and now font awesome is working

4 likes
soulglow's avatar

@michael.carrier1978@gmail.com I had to do this too but only for one package haha. Very odd. All my other css or sass I can import just using the package name first and don't have to include /node_modules prefixed. I don't get it.

inata's avatar

i hade same problem. have u read fontawesome documentation? i followed what they'd written overthere. but still had a same issue . yeah i know my case little different because i don't installed it like u did. but u can try this.

here's my code resources/sass/app.scss:

// Variables @import 'variables';

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

//fontawesome

@import "fontawesome/scss/fontawesome.scss";

// importing Font Awesome styles @import "fontawesome/scss/solid.scss"; @import "fontawesome/scss/brands.scss";

then, i tried to moved my fontawesome downloaded file to resources/sass.

i dont know why fontawesome folder didn't work outside the resources folder, so i do it like that.

it's work for me . i hope it will help u too.

--or--

maybe u can do with that with old way like adding link or script cdn.

Please or to participate in this conversation.