Угловой 2 AOT Webpack CSS относительный вложенный url

Я использую Material-Design-Icons в моем проекте, и я импортирую его css внутри моего собственного файла css.

Вот как это делается:

приложение.деталь.стиль 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-loaderon webpack-dev-server

Однако с помощью Angular 2 CLI компилятора не удастся импортировать вложенный url (шрифт).

Я получаю ошибку 404, когда вижу, что проект пытается получить шрифт относительно главного файла css ( app.component.css).

Введите описание изображения здесь

Webpack.общий.конфиг.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]'
        }
    ]

1 ответ

  1. Хорошо, я нашел альтернативу своему делу:

    Использование CDN-ссылки, и, таким образом, относительные пути обрабатываются в облаке.

    Ссылка, которую я использовал: https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css

    Надеюсь, это кому-то поможет, и я все равно хотел бы знать, почему я не мог сделать вложенный относительный импорт в компиляции AOT.