在react项目中不能直接引入antd.css文件，引入会报警告./node_modules/antd/dist/antd.css (./node_modules/css-loader??ref-

最新推荐文章于 2025-06-17 20:05:40 发布

如故

最新推荐文章于 2025-06-17 20:05:40 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： antd.css react antd.less

本文链接：https://blog.youkuaiyun.com/HZZOU/article/details/88776620

前端笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在项目中配置 Ant Design 的样式，并通过修改webpack配置文件实现全局引入antd.less文件。具体步骤包括在webpack.config.dev.js和webpack.config.prod.js文件中增加相关配置，以及设置style loader来处理CSS和LESS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决的方法是在webpack.config.dev.js和webpack.config.prod.js文件添加相关配置,然后引入antd.less：

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const stylusRegex = /\.styl$/;
const stylusModuleRegex = /\.module\.styl$/;

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      loader:'less-loader',
      options:{
        javascriptEnabled:true
      }
    },

在项目的app.js文件里全局引入antd.less