Forum

Notifications
Clear all

[Sticky] Integrating MD Bootstrap in Jhipster

4 Posts
2 Users
0 Reactions
654 Views
Forum 1
Posts: 41
Admin
Topic starter
(@admin)
Member
Joined: 6 years ago

JHipster 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 jhipster

4. 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’;

3 Replies
Forum 1
Posts: 41
Admin
Topic starter
(@admin)
Member
Joined: 6 years ago

Hi 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 Application

Reply
Forum 3
Posts: 0
Guest
(@Anonymous)
New Member
Joined: 1 second ago

Hi 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:Documentsdevprojetsworkspace-oxygen-2teach-or-learnnode_modulesangular-bootstrap-mdscsscore_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.
Reply
Forum 3
Posts: 0
Guest
(@Anonymous)
New Member
Joined: 1 second ago

Thank 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?

Reply
Share: