如何在 jHipster 4 中添加自定义 js 和 css 文件答案

【问题标题】：How to add custom js and css files in jHipster 4如何在 jHipster 4 中添加自定义 js 和 css 文件
【发布时间】：2017-02-06 13:47:54
【问题描述】：

由于我不熟悉 webpack，所以在使用 jhipster 4 时遇到了一些困难。我想在 jHipster 中添加一些应用程序级别的 js 和 css 文件。有人可以建议如何做到这一点。

【问题讨论】：

欢迎来到 Stack Overflow！您可以先使用tour，然后学习How to Ask 一个好问题并创建一个minimal reproducible example。这让我们更容易为您提供帮助。

【解决方案1】：

我们在实现primeng 时了解到将其添加到src/main/webapp/content/scss/vendor.scss 中，例如：

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

我们在创建 jhipster 应用时添加了scss 选项

【讨论】：

【解决方案2】：

在运行yarn start 时编辑src/main/webapp/content/css/global.css 文件：您的更改应该是热重新加载的。如果您有多个 CSS，请使用 @import 或将它们导入 vendor.ts。

您的自定义 js 文件也是如此，它们应该在 src/main/webapp/app 下，但可能是用 Typescript 而不是 javascript 编写的。当然，我假设你对 Angular 有一定的了解。

【讨论】：

我在使用 js 时遇到的问题是我有一些纯用 JavaScript 编写的自定义 js 代码。我无法将它们转换为打字稿
至于 css，我有 8 个自定义 css 文件。我不想通过将所有代码放在一个地方来弄乱 global.css。有没有其他解决办法
你不必将你的 js 转换为 typescript 来使用它们，有很多方法不是 jhipster 特有的。我为 css 添加了一些提示。
问题是自定义css文件没有添加到webpack，所以@import不起作用，添加到ventor.ts也不会触发webpack将那些css文件添加到webpack。从 webpack.common.js 将这些文件添加到 webpack 也无济于事。有什么建议吗？