Question

我目前正在jhipster应用程序中使用百日咳的电子邮件模板。我的问题是我不能在百里香模板中使用bootstrap css。我知道thymeleaf是一种服务器端技术，无法加载客户端存在的bootstrap css（通过node_modules），但是当我看到这两个问题的答案question1和question2时，我试过了similarty像这样导入我的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类（bootstrap和我的）只是被忽略了。

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ëlMarziou的回答之后，我将这两行添加到/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捆绑的，因此内置的web应用程序中不存在content / css / global.css，并且无法通过URL访问，请通过解压缩war文件来检查它。

但是，您可以在war文件中同时包含样式表和原始css文件，方法是将这些文件添加到CLOB的配置中，请参阅CopyWebpackPlugin文件。

如何在jhipster应用程序中使用bootstrap与thymleaf

1 个答案: