can't import Antd stylesheet file and Webpack gives error

Question

When I import

import 'antd/dist/antd.css';

these lines I got error like below.

ERROR in ./node_modules/antd/dist/antd.css 13:6
Module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders.
| /* stylelint-disable */
| /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline 
  */
> [class^=ant-]::-ms-clear,
| [class*= ant-]::-ms-clear,
| [class^=ant-] input::-ms-clear,
@ ./src/index.tsx 4:0-28

Anyone please help me how to avoid this. I am using Antd for React, Typescript project with Webpack and Babel.

yes.I have installed css-loader. WebPack Config is { test: /\.(css|scss)$/, include: [path.resolve(__dirname, 'src', 'styles')], use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, ], }, — Sowmiya, Jun 09 '21 at 07:47
Okay your config says use this css-loader when you are importing any files with the extension .css | .scss from the folders `src` and `styles` . But here you using the file from your node_modules . — Shyam, Jun 09 '21 at 07:50
You can try the approaches suggested here - https://stackoverflow.com/questions/49518277/import-css-from-node-modules-in-webpack — Shyam, Jun 09 '21 at 08:01
I had done like this. please refer here. https://stackoverflow.com/a/56590256/15375315 — Sowmiya, Aug 19 '21 at 10:02

score -1 · Answer 1 · answered Aug 19 '22 at 08:04

-1

import this one instead with min.css extensionantd/dist/antd.min.css

answered Aug 19 '22 at 08:04

Hovhannes Baghdasaryan

29
4

This does not work – Adrian Danlos Nov 15 '22 at 07:49

can't import Antd stylesheet file and Webpack gives error

1 Answers1