How to bundle KaTeX CSS from node_modules to a single output CSS from a SASS @use entry in Webpack?

Question

I would like to produce a single bundled CSS file.

In the example below, normalize works if I comment out the KaTeX part, so I know I'm on the right track, but I haven't managed to get the KaTeX part to work.

First I tried:

main.scss

@use "normalize.css/normalize.css";
@use "katex/dist/katex.min.css";

body {
  background-color: red;
}

webpack.config.js

const path = require('path');

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

const nodeModulesPath = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: {
    main: ['./main.scss'],
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader:  'css-loader',
            options: {
              sourceMap: true,
            },
          },
          // 'resolve-url-loader',
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: [nodeModulesPath],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },
};

package.json

{
  "name": "webpack-cheat",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack",
    "sass": "rm -f dist/main.css && sass main.scss dist/main.css"
  },
  "author": "Ciro Santilli",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "5.2.4",
    "css-minimizer-webpack-plugin": "3.0.2",
    "katex": "^0.13.11",
    "mini-css-extract-plugin": "2.1.0",
    "normalize.css": "8.0.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "1.32.11",
    "sass-loader": "11.0.1",
    "style-loader": "2.0.0",
    "webpack": "5.36.1",
    "webpack-cli": "4.6.0",
    "webpack-dev-server": "3.11.2"
  }
}

which fails with:

Error: Can't resolve 'fonts/KaTeX_AMS-Regular.woff2' in '/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import'

presumably because node_modules/katex/dist/katex.css does:

@font-face {
  font-family: 'KaTeX_AMS';
  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');

and fonts/KaTeX_AMS-Regular.ttf is at node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf`, and relative paths are not being searched.

This was asked at: Webpack and fonts with relative paths so then I tried to use resolve-url-loader' by uncommenting the line // 'resolve-url-loader' above, but then it fails with:

ERROR in ./main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  a valid source-map is not present (ensure preceding loaders output a source-map)
  at file:///home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/main.scss:344:3
    at encodeError (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:228:14)
    at processResult (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/webpack/lib/NormalModule.js:676:19)
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/webpack/lib/NormalModule.js:778:5
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:228:5)

There is some discussion about this error message at:

but I couldn't find a solution easily from them yet.

A direct:

sass -I node_modules main.scss dist/main.css

does not give errors, but it appears to simply not check if the fonts are findable, output contains the raw src: url(fonts/KaTeX_AMS-Regular.woff2) statements, while I suspect that Webpack will actually embed the fonts which is ideal.

Also asked on the GitHub discussions: https://github.com/KaTeX/KaTeX/discussions/3115

score 0 · Answer 1 · answered Jan 13 '22 at 08:50

The amazing maintainer of resolve-url-loader, Ben Holloway, replied to me on GitHub and pointed out that I need to add sourceMap: true to webpack.config.js at:

module.exports = {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          'resolve-url-loader',
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,

as documented at: https://github.com/bholloway/resolve-url-loader/blob/v4-maintenance/packages/resolve-url-loader/README.md#configure-webpack

After adding that, it works! Full working final example at: https://github.com/cirosantilli/cirosantilli.github.io/tree/c4a93c23e9e009a0a36e76673d167c6149295dec/web-cheat/webpack/sass

Looking back, if I knew webpack better I might have been able to deduce that from the error message. But I don't! ¯\_(ツ)_/¯

How to bundle KaTeX CSS from node_modules to a single output CSS from a SASS @use entry in Webpack?

1 Answers1

Linked