1

I'm attempting to use @angular-builders/custom-builders to set up a web font build during the normal build process. The package I'm using is webfonts-loader. I have it somewhat working, but any of the loader's options that are related to file paths are not working. I think this is due to the Angular config and not the loader package, but I'm not sure how to set it up properly.

Code is below, but there are two main problems. First is that the CSS file is being output as main.css no matter what I try, and the second is that the CSS file references the font location as /fontname.hash.ext (with the correct information filled in). The leading / is causing the files to not be found.

How do I adjust the config so that the additional path options work properly?

I added the relevant bit to angular.json, the custom Webpack config is being called:

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

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

The my-icon.font.js file is below. Some of these options are being honored, but anything related to paths is ignored.

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
};

I'm referencing that .font.js file inside main.ts like this:

import './my-icons.font';
vaindil
  • 7,536
  • 21
  • 68
  • 127
  • This has nothing to do with `webfonts-loader`. Everything you need to know is in `mini-css-extract-plugin` docs. A hint, look for `publicPath` options. I'm on my phone, hard to type much. – hackape Apr 03 '19 at 10:36
  • https://stackoverflow.com/questions/51055490/minicssextractplugin-public-path-not-working This might help – hackape Apr 03 '19 at 11:02
  • @hackape Setting those options has no effect on anything, except for `filename`. Whatever I set for `filename` is appended to the word `main.`, so if I specify `filename: 'my-icons.css'` the actual filename will be `main.my-icons.css`. – vaindil Apr 03 '19 at 15:51
  • Very hard to tell. Sympathize, man. I'm quite experienced in dealing with webpack problem, yet I feel reluctant to step in. I've been through so many webpack tortures. However, if this is very important to you, then setup a repo that can reproduce your problem and share the link. I can take a look. It could be things not covered in your question description. – hackape Apr 03 '19 at 19:43

0 Answers0