在Jhispter上使用bootstrap主题？

Question

我不是jhipster和Web应用程序编程的专业人士。 因此，也许我的问题很愚蠢，我想知道是否可以使用Bootstrap主题，例如在Jhipster主页上找到的link？

如果是，我应该做些什么来更新Jhipster中的CSS，我应该如何修改JavaScript文件？

如果Bootstrap无法实现，那么您是否可以在Jhipster上使用类似的东西？

这是我的Jhipster版本：

 {
  "generator-jhipster": {

    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "4.6.2",
    "baseName": "testdesign",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": "elasticsearch",
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "aba9f3a1b9b0feaa096db087cc1d692102a1f6b6",
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-primeng",
        "version": "2.0.53"
      }
    ],
    "enableTranslation": false
  }
}

Answer 1

JHipster确实已经使用了Bootstrap，并且将ng-bootstrap用于角度小部件。在生成的项目中，查看文件src/main/webapp/content/scss/vendor.scss以查看引导SCSS的import语句。更新它以链接到所需主题的scss文件，并找到在何处添加或替换对其他javascript文件的引用。确保首先熟悉Angular和SCSS / SASS文件！ ：）

Answer 2

您需要导入所需主题的必要文件。大多数引导主题都是由CSS文件和一些JS等组成的。

通过以下步骤，可以通过“ vendor.ts” 将这些文件导入到jhipster项目中。

1. 转到"myprojectjh\src\main\webapp\content"。
2. 为您的主题创建一个文件夹。 （例如“ mytheme01”）。
3. 打开创建的文件夹并复制主题（例如：“ theme.css”）的必要文件。
4. 转到"myprojectjh\src\main\webapp\app"并打开文件“ vendor.ts” 。
5. 写以下行以导入必要的文件（例如：“ theme.css”）。 import '../content/mytheme01/theme.css'。
6. 保存更改并再次运行您的应用程序。

您的文件 vendor.ts 可能如下所示：

注意：：此外，您还可以编辑文件“ _ bootstrap-variables.scss” 或“ global.scss” 进行必要的调整，以便正确显示您的主题。

希望对您有所帮助。