I have migrate the Metronic template from using CRA (Create React App) to Vite, and everything is working well but the SASS files are throwing an error.
This are the dependencies I am using in the project:
"dependencies": {
"@formatjs/intl-pluralrules": "^5.1.8",
"@formatjs/intl-relativetimeformat": "^11.1.8",
"@fortawesome/fontawesome-free": "^6.2.1",
"@popperjs/core": "^2.11.6",
"animate.css": "^4.1.1",
"apexcharts": "^3.36.3",
"axios": "^1.2.4",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"chart.js": "^4.2.0",
"clsx": "^1.2.1",
"formik": "^2.2.9",
"line-awesome": "^1.3.0",
"nouislider": "^15.6.1",
"prism-react-renderer": "^1.3.5",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0",
"qs": "^6.11.0",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.7.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-inlinesvg": "^3.0.1",
"react-intl": "^6.2.5",
"react-query": "^3.39.3",
"react-router-dom": "^6.7.0",
"react-table": "^7.8.0",
"react-topbar-progress-indicator": "^4.1.1",
"sass": "^1.57.1",
"socicon": "^3.0.5",
"yup": "^0.32.11"
},
I have read that to use SCSS files in REACT I just need to install the sass package but I already have installed and the problem does not seems to be solved.
The exact error comes when importing this dependencies in a sass file:
// React vendors
@import '~socicon/css/socicon.css';
@import '~@fortawesome/fontawesome-free/css/all.min.css';
@import '~line-awesome/dist/line-awesome/css/line-awesome.css';
@import '~prism-themes/themes/prism-shades-of-purple.css';
@import '~bootstrap-icons/font/bootstrap-icons.css';
@import '~animate.css/animate.css';
Once I run the app Vite throws an error saying:
[vite] Internal server error: [postcss] Failed to find '~@fortawesome/fontawesome-free/css/all.min.css'
And when I go to node modules, the package is there, but SASS is unable to find it. Do you have you any solutions for this or have you ran in this issue too?
Btw, when commenting one line the next one throws the same error and so on.
