1

我正在尝试使用@angular-builders/custom-builders在正常构建过程中设置 Web 字体构建。我使用的包是webfonts-loader。我让它有点工作，但任何与文件路径相关的加载器选项都不起作用。我认为这是由于 Angular 配置而不是加载程序包，但我不确定如何正确设置它。

代码如下，但有两个主要问题。首先，main.css无论我尝试什么，都会输出 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';
4

0 回答 0