将katex.min.css导入到我的React文件和webpack.config.js中不起作用

new9mtju 于 2023-02-19 发布在 Webpack

关注(0)|答案(1)|浏览(405)

在和我的网络包进行了一场史诗般的战斗之后，我需要去睡觉了。老实说，我不知道问题出在哪里。
我尝试了几个小时，从网上复制了一些webpack配置。
这是我的webpack.config文件

const path = require('path');
const MiniCssExtractPlugin = require('css-minimizer-webpack-plugin');

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

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader',
      },
      {
        test: /\.(js)x?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules|\.d\.ts$/,
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              noEmit: false,
            },
          },
        },
      },
      {
        test: /\.(scss|css)$/,
        // exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          // This is needed to help find the KaTeX fonts.
          // https://github.com/bholloway/resolve-url-loader/issues/107
          // https://github.com/bholloway/resolve-url-loader/issues/212
          // https://stackoverflow.com/questions/54042335/webpack-and-fonts-with-relative-paths
          // https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-from-node-modules-to-a-single-output-css-from-a-sass-us
          'resolve-url-loader',
          {
            loader: "sass-loader",
            options: {

              // This is needed for resolve-url-loader to work!
              // https://github.com/bholloway/resolve-url-loader/issues/212#issuecomment-1011630220
              sourceMap: true,
              sassOptions: {
                includePaths: [nodeModulesPath],
              },
            },
          },
        ],
      },
    ],
  },
  plugins : [new MiniCssExtractPlugin()],
  resolve : {
    extensions: ['.css', '.tsx', '.ts', '.js'],
  },
  output : {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
};

我收到错误消息：

["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[3].use[0] should be one of these:
      object { ident?, loader?, options? } | function | non-empty string
      -> A description of an applied loader.
      Details:
       * configuration.module.rules[3].use[0] should be an object:
         object { ident?, loader?, options? }
       * configuration.module.rules[3].use[0] should be an instance of function.
       * configuration.module.rules[3].use[0] should be a non-empty string.
         -> A loader request.
    * configuration.module.rules[3].use[0] should be one of these:
      object { ident?, loader?, options? } | function | non-empty string
      -> An use item.
Error: Process completed with exit code 2.

然而，我想要的只是导入Katex，就像

import 'katex/dist/katex.min.css'

到我的表组件中。
也许有人有办法？

webpack

来源：https://stackoverflow.com/questions/75454235/importing-katex-min-css-into-my-react-file-and-webpack-config-js-just-doesnt-wo

1条答案

按热度按时间

ktecyv1j1#

好吧，我找到了。正因为我很难在网上找到正确的答案（可能只有我这么想）--这就是我的解决方案。
我想在typescript React中使用katex-在这里显示一个漂亮的表https://0xpolygonmiden.github.io/examples/。
为此，我将其导入到了表组件中

import { Fragment } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import math from 'remark-math';
import katex from 'rehype-katex'
import { assemblerInstructions } from '../data/instructions';

import 'katex/dist/katex.min.css'

所以Katex有自己的CSS文件。在本地它运行良好，渲染漂亮。但是，当我试图在GitHub页面上部署时，Webpack兼容该导入缺少一个loader。
好的。所以我试着为webpack 5的导入找到正确的加载程序。
这只是sass-loader和默认情况下node-modules被排除在外，所以我不得不删除exclude: /node_modules/,当我定义的sass-loader的CSS文件.容易，哈？

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader',
      },
      {
        test: /\.(js)x?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules|\.d\.ts$/, // this line as well
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              noEmit: false, // this option will solve the issue
            },
          },
        },
      },
      {
        test: /\.css$/,
        use:['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.css', '.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这里是完整的代码，对于那些谁有兴趣.
https://github.com/0xPolygonMiden/examples/tree/main/playground

赞(0）回复(0）举报 2023-02-19

我来回答

将katex.min.css导入到我的React文件和webpack.config.js中不起作用

1条答案

相关问题

热门标签

最新问答