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

发布于 2022-09-13 01:27:30 字数 1500 浏览 46 评论 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>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文