Tagged: design, Jhipster, MD bootstrap, SASS, SCSS
- This topic has 3 replies, 2 voices, and was last updated 4 years, 3 months ago by
Mohamed.
- AuthorPosts
Balvinder Singh
KeymasterJHipster is a web application generator using Spring Boot for backend and Angular for front End with multiple technologies.
Before starting you must have Sass support in your project
Link to Jhipster :
http://jhipster.tech/MD Bootstrap provides various design components based on material design and layouts. You can check here :
Link to MD Bootstrap :
“https://mdbootstrap.com/getting-started/So let’s start steps for integrating MD Bootstrap with JHipster
First create a directory in your system with name let myAPP or any you want.
CD using terminal or file explorer in your system into above created myApp folder.
Open terminal in myApp (If you have not JHipster setup follow link https://www.jhipster.tech/installation/).Enter Command to generate JHipster project in your folder
yo jhipster4. After JHipster is installed .
5. In same terminal give command for installing MD Bootstrap via NPM (Node Package manager)
npm i angular-bootstrap-md — save
6. In same terminal give command for installing external libraries
npm install -–save chart.js@2.5.0 font-awesome hammerjs
7. To app.module.ts add
import { NgModule,Injector,NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { MDBBootstrapModule } from ‘angular-bootstrap-md’;@NgModule({
imports: [
MDBBootstrapModule.forRoot(),
],
schemas: [ NO_ERRORS_SCHEMA ]
});8. To Vendor.scss add
/* after changing this file run ‘yarn run webpack:build’ */
$fa-font-path: ‘~font-awesome/fonts’;// Images Path for angular-bootstrap-md
$image-path: ‘../../../../../node_modules/angular-bootstrap-md/img’ !default;// Fonts Path for angular-bootstrap-md
$roboto-font-path: “../../../../../node_modules/angular-bootstrap-md/font/roboto/” !default;/***************************
put Sass variables here:
eg $input-color: red;
****************************/
// Override Boostrap variables
@import “bootstrap-variables”;
// Import Bootstrap source files from node_modules
@import ‘node_modules/font-awesome/scss/font-awesome’;
@import ‘node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap’;
@import ‘node_modules/angular-bootstrap-md/scss/mdb-free’;9. In angular-cli.json add
“styles”: [
“../node_modules/font-awesome/scss/font-awesome.scss”,
“../node_modules/angular-bootstrap-md/scss/mdb-free.scss”,
“./styles.scss”,
“content/scss/vendor.scss”,
“content/scss/global.scss”
],“scripts”: [
“../node_modules/chart.js/dist/Chart.js”,
“../node_modules/hammerjs/hammer.min.js”
]10. Add following into tsconfig.json file located in root folder
“inlcude”: [ “node_modules/angular-bootstrap-md/**/*.ts ”,
“src/**/*.ts”
]11. Run in terminal to compile styles and scripts and inject to project
yarn webpack:build
12. That are all steps for integrating MD Bootstrap with Jhipster
Note : If you got any warnings in terminal after running yarn “webpack:build” then you can fix using tsLint manually
Note 2: If you got compile failed errors then you may have styles conflict
You can fix by removing normal bootstrap styles or comment it if you do not want to remove
//@import ‘node_modules/bootstrap/scss/bootstrap’;Balvinder Singh
KeymasterHi Mohammed this issue maybe due to conflicting of bootstrap file provided by MD-Bootstrap with default bootstrap by Jhipster .
You should comment out or remove default bootstrap sass file used by default
/* after changing this file run 'yarn run webpack:build' */ $fa-font-path: '~font-awesome/fonts'; // Images Path for angular-bootstrap-md $image-path: '../../../../../node_modules/angular-bootstrap-md/img' !default; // Fonts Path for angular-bootstrap-md $roboto-font-path: "../../../../../node_modules/angular-bootstrap-md/font/roboto/" !default; /*************************** put Sass variables here: eg $input-color: red; ****************************/ // Override Boostrap variables @import "bootstrap-variables"; // Import Bootstrap source files from node_modules //@import 'node_modules/bootstrap/scss/bootstrap'; @import 'node_modules/font-awesome/scss/font-awesome'; @import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap'; @import 'node_modules/angular-bootstrap-md/scss/mdb-free'; /* jhipster-needle-scss-add-vendor JHipster will add new css style */
here is the code for vendor.scss you should use ..
You can also check my git repo for MD-Bootstrap integrated JHipster Application
>>>> Material Theme Jhipster ApplicationMohamed
GuestHi I’ve done all this steps but I have the folowing error after the yarn webpack:build What can I do to work it?
ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main/webapp/content/scss/vendor.scss Module build failed: undefined ^ Argument <code>$map2</code> of <code>map-merge($map1, $map2)</code> must be a map Backtrace: node_modules/angular-bootstrap-md/scss/core/_colors.scss:43, in function <code>map-merge</code> node_modules/angular-bootstrap-md/scss/core/_colors.scss:43 in D:\Documents\dev\projets\workspace-oxygen-2\teach-or-learn\node_modules\angular-bootstrap-md\scss\core\_colors.scss (line 43, column 7) @ ./src/main/webapp/content/scss/vendor.scss 4:14-198 @ ./src/main/webapp/app/vendor.ts @ ./src/main/webapp/app/app.module.ts @ ./src/main/webapp/app/app.main.ts error An unexpected error occurred: "Command failed.
Mohamed
GuestThank you!
I use the vendor.scss like you advise me but it doesn’t work too. Iam in version 4.14.1 of jHipster and you?
- AuthorPosts