Question

我试图在常规构建过程中使用@angular-builders/custom-builders来设置Web字体构建。我正在使用的软件包为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';

自定义Angular Webpack配置，并非所有选项都能正常工作

0 个答案: