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

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 图标？ 我猜想缺少某种加载程序配置或类似这样的配置。

我将 Quill 嵌入为单独的组件:

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

编辑:

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

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

我现在收到此错误。

These relative modules were not found:

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

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

感谢您的帮助:-)

Answer 1

如果您的问题涉及 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()