0

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

这是这样做的：

app.component.css

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

材料设计图标.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;
}

现在，初始导入 (from app.component.css) 和嵌套导入 ( materialdesignicons.css) 可以正常使用to-string-loader!css-loaderonwebpack-dev-server

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

当我看到项目正在尝试获取相对于主 css 文件 ( app.component.css) 的字体时，我收到 404 错误。

在此处输入图像描述

Webpack.common.config.js（加载器）

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]'
        }
    ]
4

1 回答 1

0

好的，我为我的情况找到了一个替代方案：

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

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

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

于 2017-01-17T13:42:34.563 回答