如何在JHipster 7中本地加载CSS与字体

操作步骤 #

• 下载本地资源：找到index.html里<!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->注释后列出的在线CSS、字体URL，把这些文件下载到本地。CSS放src/main/resources/static/css/，字体放src/main/resources/static/fonts/，没有对应目录就手动创建。
• 替换引用路径：把index.html里的在线资源链接改成本地相对路径，比如将https://xxx.com/css/main.css替换为/css/main.css，字体链接同理改成/fonts/xxx.ttf这类格式。
• 避开JHipster自动覆盖：不要在上述注释后面修改内容，JHipster的代码生成器会自动往这个区域添加内容，容易覆盖你的修改。把本地资源引用放在注释之前的位置。
• 离线验证：断开网络启动项目，检查样式和字体是否正常加载。如果有报错，打开浏览器开发者工具的Network面板，查看资源路径是否正确，调整到能正常访问为止。

进阶优化 #

如果是第三方框架（比如Bootstrap）的在线资源，建议用npm安装对应包，从本地node_modules目录引用，比如node_modules/bootstrap/dist/css/bootstrap.min.css，Webpack这类构建工具会自动处理路径，还方便版本管理。

内容的提问来源于stack exchange，提问作者leonidas79