Integrating MD Bootstrap in Jhipster

Forums Open Source JHipster Discussion Integrating MD Bootstrap in Jhipster

This topic contains 3 replies, has 2 voices, and was last updated by  Mohamed 9 months, 3 weeks ago.

  • Author
    Posts
  • #2982 Score: 0 | 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 [email protected] 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’;

  • #3230 Score: 0 | Reply

    Balvinder Singh
    Keymaster

    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

  • #3229 Score: 0 | Reply

    Mohamed

    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.
  • #3284 Score: 0 | Reply

    Mohamed

    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 To: Integrating MD Bootstrap in Jhipster
Your information: