feat(v2): add fonts loaders + webpack resolve.roots (#4198)

see webpack/css-loader#1256

Author: slorber

packages/docusaurus/src/webpack/base.ts

@@ -19,6 +19,7 @@ import {
   getCustomBabelConfigFilePath,
   getMinimizer,
 } from './utils';
+import {STATIC_ASSETS_DIR_NAME} from '../constants';
 
 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;
@@ -91,6 +92,14 @@ export function createBaseConfig(
     resolve: {
       extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
       symlinks: true,
+      roots: [
+        // Allow resolution of url("/fonts/xyz.ttf") by webpack
+        // See https://webpack.js.org/configuration/resolve/#resolveroots
+        // See https://github.com/webpack-contrib/css-loader/issues/1256
+        path.join(siteDir, STATIC_ASSETS_DIR_NAME),
+        siteDir,
+        process.cwd(),
+      ],
       alias: {
         '@site': siteDir,
         '@generated': generatedFilesDir,
@@ -152,6 +161,7 @@ export function createBaseConfig(
     module: {
       rules: [
         fileLoaderUtils.rules.images(),
+        fileLoaderUtils.rules.fonts(),
         fileLoaderUtils.rules.media(),
         fileLoaderUtils.rules.svg(),
         fileLoaderUtils.rules.otherAssets(),

packages/docusaurus/src/webpack/utils.ts

@@ -235,7 +235,7 @@ export function compile(config: Configuration[]): Promise<Stats.ToJsonOutput> {
   });
 }
 
-type AssetFolder = 'images' | 'files' | 'medias';
+type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
 
 // Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
 export function getFileLoaderUtils(): Record<string, any> {
@@ -291,6 +291,13 @@ export function getFileLoaderUtils(): Record<string, any> {
       };
     },
 
+    fonts: (): RuleSetRule => {
+      return {
+        use: [loaders.url({folder: 'fonts'})],
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+      };
+    },
+
     /**
      * Loads audio and video and inlines them via a data URI if they are below
      * the size threshold