编辑：

Question

我正在尝试使用Symfony-Encore安装QuillJS。工具栏的SVG图标以某种方式无法按预期加载。

输出仅显示SVG的路径：

<span class="ql-formats">
    <button type="button" class="ql-bold">/build/images/bold.89e9c638.svg</button>
    <button type="button" class="ql-italic">/build/images/italic.b802b8f9.svg</button>
</span>

我该如何解析此路径并嵌入或链接相应的svg图标？我猜像这样的某种加载程序配置丢失或不正确。

我将羽毛笔作为单独的组件嵌入

：

import Quill from 'quill/core';
// ... more quill packages

编辑：

我添加了HTML-Loader，以使用以下配置将svg`s内联到我的HTML中：

{
    test: /\.svg$/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: true
        }
    }]
}

我现在遇到此错误。

未找到这些相关模块：

  ./node_modules/quill/ui/icons.js中的
../ assets / icons / align-left.svg
  ./node_modules/quill/ui/icons.js中的
../ assets / icons / align-center.svg
  ./node_modules/quill/ui/icons.js中的
../ assets / icons / align-right.svg
  ./node_modules/quill/ui/icons.js中的
../ assets / icons / background.svg
  ./node_modules/quill/ui/icons.js中的
../ assets / icons / align-justify.svg   ...

路径主题正确。我完全不知道这里出了什么问题。

感谢您的帮助：-）

Answer 1

您是否已将svg添加到webpack配置中允许的文件扩展名中？

resolve: {
    // Which file extensions to load
    extensions: ['.ts', '.js', '*.js', '.css', '*.css', '.json', '*.json', '.svg', '*.svg'],

Answer 2

您需要通过添加.disableImagesLoader()来禁用标准图像加载器，并添加自己的图像加载器（不包括Quill资产）。我做了以下修改，改编自this issue，它是针对CKEditor的：

.disableImagesLoader()
.addRule({
    test: /\.(svg|png|jpg|jpeg|gif|ico)/,
    exclude: /node_modules\/quill\/assets\/icons\/(.*)\.svg$/,
    use: [{
        loader: 'file-loader',
        options: {
            filename: 'images/[name].[hash:8].[ext]',
            publicPath: '/build/'
        }
    }]
})

.addLoader({
    test: /node_modules\/quill\/assets\/icons\/(.*)\.svg$/,
    loader: 'html-loader',
    options: {
        minimize: true
    }
})

Answer 3

如果您的问题涉及Laravel Mix：on GitHub there is a discussion关于Mix本身的问题，and a solution涉及如下修改webpack.mix.js文件：

mix.extend('quill', webpackConfig => {
    const { rules } = webpackConfig.module;

    // 1. Exclude quill's SVG icons from existing rules
    rules.filter(rule => /svg/.test(rule.test.toString()))
        .forEach(rule => rule.exclude = /quill/);

    // 2. Instead, use html-loader for quill's SVG icons
    rules.unshift({
        test: /\.svg$/,
        include: [path.resolve('./node_modules/quill/assets')],
        loaders: [{ loader: 'html-loader', options: { minimize: true } }]
    });

    // 3. Don't exclude quill from babel-loader rule
    rules.filter(rule => rule.exclude && rule.exclude.toString() === "/(node_modules|bower_components)/")
        .forEach(rule => rule.exclude = /node_modules\/(?!(quill)\/).*/);
});

// …

mix.js(/* ... */)
   .quill()

Webpack QuillJS输出SVG路径而不是内联

编辑：

3 个答案: