如何将KaTeX CSS从node_modules绑定到Webpack中SASS @use条目的单个输出CSS？

Question

我想要产生一个单一的捆绑CSS文件。

在下面的示例中，如果我注释掉KaTeX部件，规范化就会生效，所以我知道我在正确的轨道上，但我没有设法使KaTeX部件正常工作。

首先我试过：

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

在以下几个方面都失败了：

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

大概是因为node_modules/katex/dist/katex.css做了：

@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');

fonts/KaTeX_AMS-Regular.ttf位于node_modules/katex/dist/字体/node_modules/katex/dist/_AMS-Regular.ttf‘，没有搜索相关路径。

这是被问到的：Webpack与相对路径字体，然后我试图通过取消上面的行// 'resolve-url-loader'注释来使用resolve-url-loader'，但是它失败了：

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)

关于此错误消息，请在以下网站进行一些讨论：

• https://github.com/bholloway/resolve-url-loader/issues/212
• https://github.com/bholloway/resolve-url-loader/issues/107
• CSS错误源-地图信息在URL()声明中不可用(找到孤儿CR，尝试removeCR选项)

但我还不能轻易地从他们那里找到解决办法。

A直接：

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

没有给出错误，但它似乎根本不检查字体是否可找到，输出包含原始src: url(fonts/KaTeX_AMS-Regular.woff2)语句，而我怀疑Webpack实际上会嵌入字体，这是理想的。

在GitHub讨论中也被问到：https://github.com/KaTeX/KaTeX/discussions/3115

Answer 1

resolve-url-loader惊人的维护者本·霍洛威( Ben )在GitHub和指出上回答说，我需要在webpack.config.js上添加sourceMap: true：

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

如文件所示：https://github.com/bholloway/resolve-url-loader/blob/v4-maintenance/packages/resolve-url-loader/README.md#configure-webpack

添加之后，它就能工作了！完整工作的最后一个例子是：https://github.com/cirosantilli/cirosantilli.github.io/tree/c4a93c23e9e009a0a36e76673d167c6149295dec/web-cheat/webpack/sass

回顾过去，如果我更了解webpack，我可能会从错误信息中推断出这一点。但我不知道！¯\_(ツ)_/¯