Пользовательский конфиг Angular Webpack, не все опции работают правильно

Я пытаюсь использовать @angular-builders/custom-builders для настройки сборки веб-шрифтов во время обычного процесса сборки. Я использую пакет webfonts-loader. У меня это несколько работает, но не работают какие-либо параметры загрузчика, связанные с путями к файлам. Я думаю, что это связано с конфигурацией Angular, а не с пакетом загрузчика, но я не уверен, как правильно его настроить.

Код ниже, но есть две основные проблемы. Во-первых, CSS-файл выводится как main.css независимо от того, что я пытаюсь, а во-вторых, файл CSS ссылается на местоположение шрифта как /fontname.hash.ext (с заполнением правильной информации). Ведущий / вызывает файлы не будут найдены.

Как настроить конфиг так, чтобы дополнительные параметры пути работали правильно?

Я добавил соответствующий бит angular.jsonпользовательская конфигурация Webpack вызывается:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.font\.js/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'webfonts-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

my-icon.font.js файл ниже. Некоторые из этих параметров соблюдаются, но все, что связано с путями, игнорируется.

module.exports = {
  'files': [
    './font-svg/*.svg' // works
  ],
  'fontName': 'my-icons', // works
  'classPrefix': 'my-icon-', // works
  'baseSelector': '.my-icons', // works
  'types': ['woff2', 'woff', 'eot'], // works
  'order': ['woff2', 'woff', 'eot'], // works
  'fileName': '[fontname].[hash].[ext]', // works
  'cssFontsUrl': 'testUrl', // ignored
  'dest': 'testDest', // ignored
  'cssDest': 'testCssDest' // ignored
};

Я ссылаюсь на это .font.js файл внутри main.ts как это:

import './my-icons.font';

0 ответов

Другие вопросы по тегам