[Umijs] 打包怎么抽离antd样式表

ajanuw
  • 38

打包能抽离js,但是怎么配置css的抽离呢?

{
    externals: {
      react: 'window.React',
      'react-dom': 'window.ReactDOM',
      qs: 'window.Qs',
      'js-cookie': 'window.Cookies',
      axios: 'window.axios',
      antd: 'window.antd',
      dayjs: 'window.dayjs',
      rxjs: 'window.rxjs'
    },
    scripts: [
      'https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.3.0/rxjs.umd.min.js',
    ],
}

上面那样配置,打包后antd的样式表被打包到了umi.css中,我想将其添加到打包后的index.html

就像这样

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">
    <link rel="stylesheet" href="/umi.css" />
  </head>
  <body>
    <div id="root"></div>
    ...
    <script src="/umi.js"></script>
  </body>
</html>
回复
阅读 157
1 个回答

如果使用的umi3.X,请查看文档FAQ章节,已经给出了答案
image.png
实际还是通过修改webpack配置达到分离的效果
至于单独分离antd的样式,在test上面配置test: /\antd.(css|less)$/或者其他方式引入的样式,类似处理即可
umi2.X也差不多,关键还是修改webpack配置即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏