markdown 使用Bootswatch进行JHipster主题定制

Posted 2021-05-06

# Installing and Chooosing a Theme with Bootswatch
on terminal, add *bootswatch*
`yarn add bootswatch`

choose a thene on [Bootswatch](https://www.bootstrapcdn.com/bootswatch/)

Edit the `src/main/webapp/content/scss/vendor.scss`. The order is important.
```
// Override Boostrap variables
@import "bootstrap-variables";
// add bootwatch module after variables
\!h @import 'node_modules/bootswatch/dist/materia/variables';

// Import Bootstrap source files from node_modules
@import 'node_modules/bootstrap/scss/bootstrap';
// import the theme after bootstrap
\!h @import "node_modules/bootswatch/dist/{themeName}/bootswatch";
```

# Customizing Further
- to customize further, override *Bootstrap* variables in `src/main/webapp/content/scss/_bootstrap-variables.scss`
- the list of supported variables can be found on `node_modules/bootstrap/scss/_variables.scss`