Angular 2 AOT Webpack CSS relative nested url

Question

I'm using Material-Design-Icons in my project, and I'm importing its css inside my own css file.

This is how it is done:

app.component.css

@import "../node_modules/mdi/css/materialdesignicons.min.css";

materialdesignicons.css

@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.eot?v=1.7.22");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=1.7.22") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=1.7.22") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=1.7.22") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=1.7.22") format("truetype"), url("../fonts/materialdesignicons-webfont.svg?v=1.7.22#materialdesigniconsregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Now, the initial import (from app.component.css ) and the nested import ( materialdesignicons.css ) work fine with to-string-loader!css-loader on webpack-dev-server

However, using Angular 2 compiler CLI will not manage to import the nested url (the font).

I get 404 error, when I see that the project is trying to get the font relative to the main css file ( app.component.css ).

Webpack.common.config.js (Loaders)

loaders: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader'
            ]
        },
        {
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.css$/,
            loaders: [
                'to-string',
                'css'
            ]
        },
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'file?name=[path][name].[ext]'
        }
    ]

Answer 1

Okay, I found an alternative for my case:

Using a CDN link, and thus the relative paths are handled on the cloud.

The link I used: https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css

Hope this helps anyone, and I would still like to know why I couldn't do a nested relative import in AOT compilation.