FancyTree引导主题不适用

Question

我在一个类中初始化了我的FancyTree。下面是类导入的内容：Tree.js

import fancytree from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
import 'jquery.fancytree/dist/modules/jquery.fancytree.dnd5';
import 'jquery.fancytree/dist/modules/jquery.fancytree.glyph';
import 'jquery.fancytree/dist/modules/jquery.fancytree.table';
import 'jquery.fancytree/dist/modules/jquery.fancytree.wide';

我使用的是RollUp，所以导入按预期工作。但是，我无法找到任何解决方案来应用特定的主题，即bootstrap3到我的树中。index.html进口

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/icons.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css">
    <link href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">

最后，FancyTree的初始化。Tree.js

$('#explorer-tree').fancytree({
      extensions: ['dnd5', 'edit', 'glyph', 'wide'],
      glyph: {
        preset: 'bootstrap3',
        map: {
          doc: 'fa fa-file-o',
          docOpen: 'fa fa-file-o',
          checkbox: 'fa fa-square-o',
          checkboxSelected: 'fa fa-check-square-o',
          checkboxUnknown: 'fa fa-square',
          dragHelper: 'fa arrow-right',
          dropMarker: 'fa long-arrow-right',
          error: 'fa fa-warning',
          expanderClosed: 'fa fa-caret-right',
          expanderLazy: 'fa fa-angle-right',
          expanderOpen: 'fa fa-caret-down',
          folder: 'fa fa-folder-o',
          folderOpen: 'fa fa-folder-open-o',
          loading: 'fa fa-spinner fa-pulse',
        },
      },
      icon: function(event, data) {
        // if( data.node.isFolder() ) {
        //   return "glyphicon glyphicon-book";
        // }
      },
      source: [
        {title: 'project-name', key: '1',
          expanded: true},
      ],
    });

这棵树看起来是一样的-默认的。没有造型应用，没有任何东西。即使是文档也不能真正解释它是如何工作的。

Answer 1

由于FancyTree是以一种非常孤立的方式制作的，所以应用自定义样式的唯一方法是首先不包括默认样式。我不得不重写css文件来调整它们，否则它什么也做不了。如果导入多个css文件，它还会将默认图标与awesome4图标重叠。