Integrating MD Bootstrap in Jhipster

  • Creator
    Topic
  • #2982 Reply
    Balvinder Singh
    Keymaster

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

  • Posted In: JHipster Discussion

    • Keymaster
      #3230

      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

    • Guest
      #3229

      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:\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.
    • Guest
      #3284

      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?

Viewing 2 reply threads
Reply To: Integrating MD Bootstrap in Jhipster
Your information:




This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More