antd打包css路径

antd是一个流行的React UI组件库，在使用时我们可能需要将它们打包进我们的项目中。然而，在打包过程中，可能会遇到一些问题，其中之一就是antd的css路径问题。

antd打包css路径

在使用antd时，我们需要引入它们的css文件。一种常见的方法是在我们的入口文件中引入antd.css：

import 'antd/dist/antd.css';

然而，当我们将项目打包为生产环境时，antd的css路径可能会出现错误。这是因为antd的css文件中包含相对路径，而这些路径可能会在不同的环境中发生变化。

解决这个问题的方法是使用webpack的ExtractTextWebpackPlugin插件将antd的css提取为单独的文件，并通过html-webpack-plugin在我们的html文件中引用这个文件。我们需要在webpack的配置文件中引入这两个插件：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

然后，在我们的webpack配置文件中，我们需要添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,use: ExtractTextPlugin.extract({
          fallback: 'style-loader',use: 'css-loader'
        })
      }
    ]
  },plugins: [
    new ExtractTextPlugin('styles.css'),new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ]
}

这将抽取antd的css，并将其保存为styles.css文件。然后，HtmlWebpackPlugin插件将在我们的html文件中添加一个link标签来引用这个css文件：

<head>
  <link href="styles.css" rel="stylesheet">
</head>

现在，我们的antd组件将能够正确地加载样式，而不再出现路径错误的问题。

相关推荐