CODEWITHSUNDEEP
reactjssassvitemetronic
Luis Edwards
Luis Edwards

Reputation: 103

Error importing CSS dependencies into a SASS file (REACT + VITE + Metronic Template)

I recently migrated a project using the Metronic template from Create React App (CRA) to Vite and encountered an error with my Sass files. Despite having the sass package installed, Vite fails to resolve imports for CSS files in my Sass files.

"dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.1",
    "animate.css": "^4.1.1",
    "bootstrap-icons": "^1.10.3",
    "prism-themes": "^1.9.0",
    "sass": "^1.57.1",
    // other dependencies...
}

Error Message

[vite] Internal server error: [postcss] Failed to find '~@fortawesome/fontawesome-free/css/all.min.css'

This error appears when I try to import external libraries in my Sass file like so:

@import '~socicon/css/socicon.css';
@import '~@fortawesome/fontawesome-free/css/all.min.css';
// other imports...

I've confirmed that these packages exist in node_modules, yet Vite cannot find them. The problem persists as I comment out each line; the next import immediately throws a similar error.

Has anyone experienced similar issues with Vite and Sass or knows why these imports might be failing? How can you configure Vite to correctly handle these imports?

Upvotes: 0

Views: 1980

Answers (1)

Dima Hinev
Dima Hinev

Reputation: 61

Try to remove all ~ (tilde) from the import:

before:

@import '~socicon/css/socicon.css';

after:

@import 'socicon/css/socicon.css';

Because, vite use postCss instead of webpack

Upvotes: 2

Related Questions