How use bootstrap with thymleaf in jhipster application

问题

I'm currently working on an email template with thymeleaf in a jhipster application. My problem is that i can't use bootstrap css in thymeleaf template. 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|}" />

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 contains my css classes, and vendor.css is the default jhipster file that calls bootstrap vendor.css

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

My template is located under

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

My css is located under

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

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

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' },

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|}" />

but Thymleaf stills ignore my css classes

回答1:

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.

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.

来源：https://stackoverflow.com/questions/48195776/how-use-bootstrap-with-thymleaf-in-jhipster-application