I have installed antd dependancy while working on a react app and i am trying to import css from antd using import ‘antd/dist/antd.css’;
but its showing an error that :
Module not found: Error: Can’t resolve ‘antd/dist/antd.css’ in ‘/Users/parasnagpal0707/Documents/Projects/cryptoverse/src’
ERROR in ./src/index.js 8:0-28
Module not found: Error: Can’t resolve ‘antd/dist/antd.css’ in ‘/Users/parasnagpal0707/Documents/Projects/cryptoverse/src’
Source Code of index.js file is this :
import React from "react";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import ReactDOM from "react-dom";
import 'antd/dist/antd.css';
ReactDOM.render(
<Router>
<App/>
</Router>
,document.getElementById('root'));
My dependancies in Package.json are :
"dependencies": {
"@ant-design/icons": "^5.0.1",
"@reduxjs/toolkit": "^1.9.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^5.2.0",
"axios": "^1.3.2",
"chart.js": "^4.2.1",
"html-react-parser": "^3.0.9",
"millify": "^5.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
Project Structure is :
https://ibb.co/17zJkMf
I tried to Import antd/dist/antd.css and i was expecting the css styling to get applied on my Application but its not even getting imported and showing module not Found .
2
Answers
Try to change from
import 'antd/dist/antd.css';
toimport './antd/dist/antd.css';
According to this page, this is the file structure in antd package, there is only
antd/dist/reset.css
instead ofantd/dist/antd.css
I didn’t test the code but I think it should work by changing the file name like the above.