在 Fomantic-UI(原 Semantic-UI) 中通过编译去除 emoji 组件

原来的 Semantic-UI 已经基本不怎么维护了,现在社区重新改名维护了一套 Fomantic-UI,东西还都是一样的。

最近新增了一个 emoji 组件,导致整体打包的 css 文件体积变大,但是平时可能几乎用不到,以下是寻找了一下去除的方法,也同样适用于需要定制组件打包的情况:

1、根据官方文档:https://fomantic-ui.com/introduction/build-tools.html#30-second-explanation

需要先下载 Fomantic-UI 的完整源代码,并且在本地环境有安装 gulp 工具

2、先进行一次 npx gulp build,会发现在根目录下生成有 semantic.json,或者直接将 semantic.json.example 文件改为 semantic.json 来进行配置

3、根据官方文档:https://fomantic-ui.com/introduction/build-tools.html#semanticjson

在此文件中可以对打包的组件进行配置,以下是移除 emoji 的配置列表:

{
  "base": "",

  "paths": {
    "source": {
      "config"      : "src/theme.config",
      "definitions" : "src/definitions/",
      "site"        : "src/site/",
      "themes"      : "src/themes/"
    },
    "output": {
      "packaged"     : "dist/",
      "uncompressed" : "dist/components/",
      "compressed"   : "dist/components/",
      "themes"       : "dist/themes/"
    },
    "clean"        : "dist/"
  },

  "individuals": [
    "emoji"
  ],

  "permission" : false,
  "autoInstall": false,
  "rtl": false

}

4、将配置文件中最后的 individuals 中配置 emoji 组件,这样重新 build 时,就会单独打包 emoji 组件了,在 dist 中获取到新的文件。

posted @   不是豆豆  阅读(321)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
友情链接:迷途


点击右上角即可分享
微信分享提示