Can't figure out how to replace a default Angular plugin / inline fonts

[metallidevils]

Is your feature request related to a problem? Please describe. I am struggling with figuring out how to inline font files that are referenced in css. I understand that by default, Angular CLI ships with a file-loader that tests for .woff/woff2/etc files.

How can I remove/replace this file-loader, and instead use a base64-inline loader to inline the font files? I assume that removing default loaders should be possible but I cannot find a straightforward way to do this. Thanks!

[novathore]

Same problem, can't use custom loader to inline svg. I have .less file, and property for background that refers to node_modules like background: url(~symlink_to_node_modules/images/menu.svg) no-repeat center; I am tried to cutoff svg rule from base config that shipped from cli: { test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, loader: 'file-loader', options: { name: '[name].[ext]' } } , and this don't work. My test rule doesn't match svg, but svg image somehow bundled. Is there any workaround?

[arturovt]

@metallidevils Hey.

How can I remove/replace this file-loader, and instead use a base64-inline loader to inline the font files?

// extra-webpack.config.js
module.exports = config => {
  config.module.rules = config.module.rules
    .filter(rule => rule.loader !== 'file-loader')
    .concat({
      test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
      loader: 'base64-inline-loader',
      options: {
        name: '[name].[ext]'
      }
    });

  return config;
};

Checked it with a simple example:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

import base64 from './image.jpg';

@Component({
  selector: 'app-root',
  template: `
    <img [src]="base64" />
  `
})
export class AppComponent {
  base64 = this.sanitizer.bypassSecurityTrustUrl(base64);

  constructor(private sanitizer: DomSanitizer) {}
}

[just-jeb]

@arturovt thanks! This is going to load all these file types with base64-inline-loader. Although you did show the way for removing the default loader I think the author wanted to load just the font files (or in case of @novathore svgs) with custom loader.
Seems like in these cases the default loader should be replaced with two loaders (one is custom-loader for the specific extension and file-loader for the rest). Right?

[arturovt]

I think he will need to check the RegEx used by Angular and modify with its own (that doesn't contain font extensions) + also add the base64-inline-loader. Something like:

// pseudocode tho
rules.find(findFileLoader).test = /\.(svg|jpg|....without woff etc.)/
rules.push({ test: /fonts extensions regex/, loader: base64-inline-loader });

[just-jeb]

Yeah that's probably better because it only affects the matching without assuming anything about other options (in case they change it in the future).

[arturovt]

If you don't know the original regex then you could do something like:

module.exports = config => {
  const fileLoader = config.rules.find(rule => rule.loader === 'file-loader');

  fileLoader.test = new RegExp(
    fileLoader.test.source
      .replace(/\|woff/, '')
      .replace(/\|woff2/, '')
      .replace(/\|ttf/, '')
  );

  config.rules.push({
    test: /\.(woff|woff2|ttf)$/,
    loader: 'base64-inline-loader',
  });

  return config;
};

Not very strong in regex tho :D

[novathore]

@arturovt
import base64 from './image.jpg'; In this case, when your javascript/typescript file have directly dependency its ok. But, when i have dependency, in my css, like background: url(my/long/path/to/my/nice.svg), the test rule like /svg$/ doesnt work at all.

[arturovt]

@novathore Could you make a github repo with reproduction please? I do not wanna try to reproduce your behavior locally on my own...

[arturovt]

Closing as stale.