在Jhipster应用程序中如何将Bootstrap与thymleaf一起使用 [英] How use bootstrap with thymleaf in jhipster application

问题描述

我目前正在jhipster应用程序中使用百里香叶处理电子邮件模板.

I'm currently working on an email template with thymeleaf in a jhipster application.

我的问题是我不能在百里香模板中使用bootstrap css.

My problem is that i can't use bootstrap css in thymeleaf template.

我了解thymeleaf是一种服务器端技术，无法加载客户端上存在的引导CSS(通过node_modules)，但是当我看到这两个问题的答案时问题2 我也类似地尝试导入这样的CSS

I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this

 <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和mine)只是被忽略了.

but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.

PS:global.css包含我的CSS类，vendor.css是调用引导程序的默认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

那么我如何在百里香中使用global.css和vendor.css中的CSS类?

So how can i use css classes from global.css and vendor.css in thymleaf?

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

UPDATE After Gaël Marziou's answser i added these two lines to /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中，我这样称呼这两个文件

and in /src/main/resources/mails/applicationReport.html i call these two files like that

<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类

but Thymleaf stills ignore my css classes

推荐答案

您的CSS文件是由webpack捆绑的，因此content/css/global.css在您构建的web应用程序中不存在，并且无法通过URL进行访问，请通过解压战争文件.

Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.

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

However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.

这篇关于在Jhipster应用程序中如何将Bootstrap与thymleaf一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！