解决React项目在index.css中使用 @import '~antd/dist/antd.css' 引入antd样式报 Can't resolve '~antd/dist/antd.css'

Question

Can't resolve '~antd/dist/antd.css' in 'D:\IT\demo\web\src'

使用 ant-desgin 组件 在 index.css 中使用 @import '~antd/dist/antd.css';引入是报错 Can't resolve '~antd/dist/antd.css' in 'D:\IT\demo\web\src'

 ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '~antd/dist/antd.css' in 'D:\IT\demo\web\src'
    at finishWithoutResolve (D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:309:18)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:386:15
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:43:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\ConditionalPlugin.js:53:42
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\Resolver.js:435:5
    at eval (eval at create (D:\IT\demo\web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\IT\demo\web\node_modules\enhanced-resolve\lib\DirectoryExistsPlugin.js:41:15
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

项目信息如下：

尝试过的解决方法

在 node_moduels 下查找 antd/dist/antd.css，并无 antd.css 文件，只有 reset.css 文件，将 @import '~antd/dist/antd.css';修改为 @import '~antd/dist/reset.css';

达到的结果

程序暂时没有出现其他错误。

Answer 1

antd5由于 CSS-in-JS 支持按需引入，原本的 antd/dist/antd.css 也已经移除，如果需要重置一些基本样式请引入 antd/dist/reset.css。