Topic: Font path is error when compile scss by angular cli

Tran Quoc Hieu free asked 7 years ago


Hello, I'm trying to integrate MDB into ng-bootstrap: Angular 4.2.3. Bootstrap: 4.0.0-alpha.6. ng-boostrap: 1.0.0-alpha.26 In slyle.scss, I added: @import '../node_modules/mdbootstrap/sass/mdb' => Error: ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss Module not found: Error: Can't resolve '../font/roboto/Roboto-Thin.eot' in 'D:ProgramsDemosrc' @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss 8:254834-254875 8:254898-254939 @ ./src/styles.scss @ multi ./src/styles.scss Please help me check whether this is a bug or not. Thanks in advance! Hieu Tran

Piotr Bender free answered 7 years ago


Hello,In response to your issue, I wanted to let you know about just released MDBootstrap Angular kit, that may be a sufficient solution to this or any other issues you have had with Angular integration so far.The kit can be found at the following link:https://mdbootstrap.com/angular/It contains all the components you could find in MDB jQuery version.We encourage you to try it out and report any bugs or issues at contact@mdbootstrap.com with [Angular] prefix or create a thread on this forum.Have a great day!


Tran Quoc Hieu free answered 7 years ago


Thank you so much! It works now. I'll try to customize some thing from your sass, if it also works, this is maybe temporarily a solution to work with Angular CLI.

Adrian Sawicki free answered 7 years ago


We are working on it. We are doing it in pure angular (or almost pure). Cli version should be deployed very soon. Okay so to make it work you should import your files in .angular-cli.json (you can add styles, scripts etc. in this file); example, which will work for you I've just checked it: angular-cli.json

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/mdbootstrap/sass/mdb.scss",
        "styles.scss"
      ],

Tran Quoc Hieu free answered 7 years ago


I put the sample project on github, you can clone it from https://github.com/hieutranagi47/Angular2-MDB Thanks, Hieu Tran

Tran Quoc Hieu free answered 7 years ago


Hello Adrian Sawichi, First of all, thank you so much for your reply. I installed mdbootstrap by node package manager (npm), so that font folder is added in my project My project structure similar it. DemoApp -- node_modules -- -- mdbootstrap -- -- -- css -- -- -- font -- -- -- img -- -- -- js -- -- -- sass -- src -- -- style.scss I know that you don't support angular 4 yet, but I hope that you will support it future. I guess that these is a potential combine between angular4 and mdb in future. I don't see image attachment button here, so I can not capture my project. More information: I created angular4 project by angular-cli: "ng new DemoApp --style=scss" https://github.com/angular/angular-cli Added bootstrap 4: "npm install --save bootstrap@^4.0.0-alpha.6" Added ng-bootstrap by: "npm install --save @ng-bootstrap/ng-bootstrap" https://ng-bootstrap.github.io/#/getting-started, Then added mdbootstrap by: npm install --save mdbootstrap Thanks, Hieu Tran

Adrian Sawicki free answered 7 years ago


Hello, It seems that you didn't move your folder "font" into your project. It's my first guess. It would be nice to see your app structure to help more accuretly. We don't support angular 2/4 yet. However, I might be capable of helping you.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags