Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Corona Virus Stats (Covid-19)
  • Work with us
  • FB
  • LinkedIn
  • Twitter
  • Instagram.com
Tekraze

Tekraze

Dive Into Technology

  • Guides
    • Developer Guide
    • PC Guide
    • Web Guide
    • Android Guide
    • Music
    • Tutorials
  • Feed
    • Tech News
    • Shared Tech
    • Gaming Videos
    • Unboxing videos
  • Forums
    • Android Apps
    • Angular Npm Packages
    • Useful Site Links
    • Tech Queries
    • Windows OS Help
    • Web Guide and Help
    • Android Os And Rooting
    • Jhipster Discussion
    • Git & GitHub forum
    • Open Source Forum
  • Tools
    • Apk Downloader
    • Speed Test
  • Games
    • Quiz Games
    • Browser Games
  • Short Videos
  • Work with us
  • Toggle search form
  • Laptop Showing Web application Development
    18 new Web Application Development Trends in 2022 Tech News
  • World’s Smallest 1TB USB-C Flash Drive 1
    World’s Smallest 1TB USB-C Flash Drive Tech News
  • Mining Crypto and industry best practices
    Mining Crypto and industry Best practices Tech News
  • AI Join Hands With Mobile Apps Tekraze
    When AI Joins hands with Mobile Apps Guest posts
  • The Latest Android Update Is Focused on Security
    The Latest Android Update Is Focused on Security Android Guide
  • Trends in Technology Driving e-Commerce in 2020 Banner Image
    Trends in Technology That are Driving e-Commerce in 2020 Tech News
  • Your IP Address Says More About You Than You Know 2
    Your IP Address Says More About You Than You Know Guest posts
  • Put your Imagination to work & win a chance to visit Google India 3
    Put your Imagination to work & win a chance to visit Google India Tech News

Integrating MD Bootstrap in Jhipster

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.
Viewing 3 reply threads
  • Author
    Posts
    • April 14, 2018 at 12:49 pm #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’;

    • May 3, 2018 at 8:06 pm #3230 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

    • May 3, 2018 at 8:06 pm #3229 Reply
      Mohamed
      Guest

      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.
    • May 3, 2018 at 9:12 pm #3284 Reply
      Mohamed
      Guest

      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?

  • Author
    Posts
Viewing 3 reply threads
Reply To: Integrating MD Bootstrap in Jhipster
Your information:




Cancel
  • Web 3.0 Tekraze
    Switching to Web 3.0 and DAPPS – Tekraze Web Guide
  • Tekraze music
    When the music is On, Code Snippets Dances too Music
  • BackEnd Technologies part 2- Databases | Tekraze 4
    BackEnd Technologies part 2- Databases | Tekraze Developer Guide
  • Jekyll - A Beginners Guide to static website 5
    Jekyll – A Beginners Guide to static website Tutorials
  • free graphic design websites for graphic designers banner in 2021
    29 Top Free Graphic Design Websites for Graphic Designers in 2021 Developer Guide
  • BI Trends to Track analytics Tekraze
    Big BI Trends to Track in 2020 Guest posts
  • A simple script to create Rest API in Python with Dockerization as Bonus
    A simple script to create Rest API in Python with Dockerization as Bonus Developer Guide
  • Top mini games to play online for free in browser
    12 Top mini games to play online for free in browser Web Guide

Affliate Links

Earn With Flyout

Earn with Magenet

Sell and Buy with Adsy

GainRock affiliate Program

BloggerOutreach.com

Automatic Backlinks

Encatena - Your content marketing platform
accessily tekraze verificationIndian Blog DirectoryActive Search ResultsLinksBull Directory

Copyright © 2022 Tekraze.

Powered by PressBook News WordPress theme

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.
      Advertisements