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 11 months, 2 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://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: