Angular 2 AOT Webpack CSS相对嵌套的url

Question

我在我的项目中使用Material-Design-Icons，并且我在自己的css文件中导入了css。

这是如何完成的：

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;
}

现在，初始导入（来自app.component.css）和嵌套导入（materialdesignicons.css）可以to-string-loader!css-loader上的webpack-dev-server正常工作

但是，使用 Angular 2编译器CLI 将无法导入嵌套网址（字体）。

当我看到项目试图获取相对于主css文件（app.component.css）的字体时，我收到404错误。

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

好的，我为我的案子找到了另一种选择：

使用CDN链接，因此在云上处理相对路径。

我使用的链接：https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css

希望这可以帮助任何人，我仍然想知道为什么我不能在AOT编译中进行嵌套的相对导入。