如何在 jhipster 应用程序中使用 bootstrap 和 thymeleaf

Question

我目前正在 jhipster 应用程序中使用 thymeleaf 制作电子邮件模板。

我的问题是我不能在百里香模板中使用引导 css。

我知道 thymeleaf 是一种服务器端技术，无法加载存在于客户端的引导 css（通过 node_modules），但是当我看到question1 和 question2 这两个问题的答案时，我尝试了类似像这样导入我的css

 <link rel="stylesheet" type="text/css" media="all"  th:href="@{|${baseUrl}/content/css/global.css|}" />
 <link rel="stylesheet" type="text/css" media="all"  th:href="@{|${baseUrl}/content/css/vendor.css|}" />

但 thymleaf 仍然无法加载这两个文件，我在控制台上没有错误，但 css 类（引导程序和我的）被忽略了。

PS : global.css 包含我的 css 类，vendor.css 是调用 bootstrap 的默认 jhipster 文件 vendor.css

@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~font-awesome/css/font-awesome.css';

我的模板位于

/src/main/resources/mails/applicationReport.html

我的css位于

/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css

那么如何在 thymleaf 中使用 global.css 和 vendor.css 中的 css 类？

更新 在 Gaël Marziou 的回答之后，我将这两行添加到 /demain/webpack/webpack.common.js

 { from: './src/main/webapp/content/css/global.css', to: 'global.css' },
 { from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },

在 /src/main/resources/mails/applicationReport.html 我这样称呼这两个文件

<link rel="stylesheet" type="text/css" media="all"  th:href="@{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all"  th:href="@{|${baseUrl}/vendor.css|}" />

但 Thymleaf 仍然忽略我的 css 类

Answer 1

你的 CSS 文件是由 webpack 打包的，所以你构建的 webapp 中不存在 content/css/global.css 并且无法通过 URL 访问，请通过解压缩你的 war 文件来检查它。

但是，通过将这些文件添加到 CopyWebpackPlugin 的配置中，您可以在您的 war 文件中同时包含捆绑的样式表和原始 css 文件，请参见 webpack-common.js 文件。