Question

我正在尝试将QuillJs导入到我的项目中。我一直在关注他们的所有文档，但是有错误。我不会错过任何一个步骤。

我使用npm进行安装

npm install quill@1.3.6

然后将导入代码放入我的main.js中并与webpack捆绑

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

export default Quill;

但是，我收到以下错误

ERROR in ./node_modules/quill/assets/icons/image.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
|   <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
 @ ./node_modules/quill/ui/icons.js 31:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

ERROR in ./node_modules/quill/assets/icons/video.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect>
|   <rect class="ql-fill" height="12" width="1" x="5" y="3"></rect>
 @ ./node_modules/quill/ui/icons.js 48:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

当前，您可能需要适当的加载器来处理此文件类型没有配置任何加载程序来处理此文件。

我已经安装了所有必需的依赖项

babel-core，babel-loader，babel-preset-es2015，ts-loader，css-loader，打字稿， html-loader

但是，我仍然遇到错误，不知道为什么。我非常感谢任何答复。这是官方指南 https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

Answer 1

您需要安装和配置加载程序以处理SVG文件或其他映像：

npm install file-loader --save-dev

然后，在您的Webpack配置（webpack.config.js）中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

与Webpack捆绑销售QuillJ导致错误

1 个答案: