在 Jhipster 上使用引导主题？答案

【问题标题】：Use of bootstrap theme on Jhispter?在 Jhipster 上使用引导主题？
【发布时间】：2018-07-03 18:16:44
【问题描述】：

我不是 jhipster 和 Web 应用程序编程方面的专家。所以也许我的问题很愚蠢，我想知道是否可以使用像您可以在此处找到的 Bootstrap 主题：link 用于 Jhipster 的主页？

如果是，我应该改变什么来更新 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
  }
}

【问题讨论】：

Andrea，如果你需要添加一个主题，你基本上需要导入theme.css或theme.scss，就完成了。另外有些主题也需要js。
我的问题是，我不知道应该把文件放在哪里以及如何覆盖 jhipster 的 css
检查我的答案，它可以帮助你。

标签： jhipster

【解决方案1】：

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

在您的 jhipster 项目中导入这些文件可以通过 "vendor.ts" 来完成，步骤如下。

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

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

注意：此外，您可以编辑文件 "_bootstrap-variables.scss" 或 "global.scss" 以制作其他必要的调整，以便您的主题正确显示。

希望对你有帮助。

【讨论】：

【解决方案2】：

JHipster 已经使用 Bootstrap，并且 ng-bootstrap 用于 Angular 小部件。在生成的项目中，查看文件src/main/webapp/content/scss/vendor.scss 以查看引导 SCSS 的导入语句。更新此链接以链接到所需主题的 scss 文件，并找到添加或替换对其他 javascript 文件的引用的位置。确保您首先熟悉 Angular 和 SCSS/SASS 文件！ :)

【讨论】：

谢谢，我仍然不确定如何决定使用新的 navbar.scss 而不是 Jhipster 中已经存在的那个？我也不确定应该在 vendor.scss 中的“Saas 变量”中添加什么。您认为为主题添加一个新目录更好吗？还是我应该把所有这些东西放在 node-module/bootstrap/scss 和 node-module/bootstrap/js 中？