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

发布于 2022-09-13 01:27:30 字数 1500 浏览 39 评论 0

打包能抽离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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半暖夏伤 2022-09-20 01:27:30

如果使用的umi3.X，请查看文档FAQ章节，已经给出了答案

实际还是通过修改webpack配置达到分离的效果
至于单独分离antd的样式，在test上面配置test: /\antd.(css|less)$/或者其他方式引入的样式，类似处理即可
umi2.X也差不多，关键还是修改webpack配置即可