3. @import url are causing an error

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

@import url are causing an error

  • R

    OnsenUI: 2.9.0
    Angular : 5.2.0

    These 3 lines:

    @import url(“ionicons/css/ionicons.min.css”);
@import url(“material-design-iconic-font/css/material-design-iconic-font.min.css”);
@import url(“font_awesome/css/font-awesome.min.css”);

    are causing this:

    0_1516886601299_Selection_002.png

    So I just add the prevention for that:

    @import url(“./ionicons/css/ionicons.min.css”);
@import url(“./material-design-iconic-font/css/material-design-iconic-font.min.css”);
@import url(“./font_awesome/css/font-awesome.min.css”);

    Sorry but I’m newbie, so my solution is just for get out of my problem, but I know that I should not have done that. I did it because I dont know how to configure webpack while I’m using angular-cli, so if you could help me do it the right way I would appreciate it.

    if not, could I help doing a PR?

    1 1 Reply
  • Onsen UI

    @rad8329 Are you using any template provided by Onsen UI? I think webpack should be working well in all the templates :confused:

    -1
  • R

    @Fran-Diox I’ve followed the setup and fundamentals https://onsen.io/v2/guide/angular2/, I’ve not done anything apparently strange. I’m using several OnsenUI components, but, I do not know how the templates will help me, because this issue happens in the build time, when webpack is building the styles bundle.

    1
  • G

    I have the same issue. Did you find a solution? Unless I copy and modify the module’s files I get these runtime errors. I am importing the files in my global sass file

    0
  • R

    @geochr I found a nasty solution, just go to the main css file of OnsenUI

    > ./node_modules/onsenui/css/onsenui.css

    And manually change the relative path

    @import url(“./ionicons/css/ionicons.min.css”);
@import url(“./material-design-iconic-font/css/material-design-iconic-font.min.css”);
@import url(“./font_awesome/css/font-awesome.min.css”);

    This is not a real solution, because when install or update the packages these changes are simply replaced, but while there is a final solution, so you can build

    0 1 Reply
  • Onsen UI

    @rad8329 @geochr Can you try using onsenui-core.css instead of onsenui.css? That file does not import fonts so it should not throw errors. After that, you can import the fonts you need in your app manually so you don’t need to modify any dependency.

    All the reports about this issue are with Angular 5, I wonder what changed… I think ngx-onsenui is only tested with Angular 4 but I’m still surprised the font imports fail…

    0