【问题标题】：Webpack QuillJS outputs SVG path instead of inlining itWebpack QuillJS 输出 SVG 路径而不是内联它
【发布时间】：2019-03-08 01:50:48
【问题描述】：

我正在尝试使用 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-icon？我猜是缺少某种加载器配置，或者像这样。

我将 Quill 作为单独的组件嵌入：

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

编辑：

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

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

我现在收到此错误。

未找到这些相关模块：

../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 在 ./node_modules/quill/ui/icons.js ...

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

感谢您的帮助:-)

【问题讨论】：

你找到解决这个问题的方法了吗？
你有什么解决办法吗？

标签： svg webpack quill

【解决方案1】：

您需要通过添加 .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
    }
})

【讨论】：

【解决方案2】：

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

【讨论】：

将第 2 步，html 加载器部分替换为：const quillIconsRegex = /node_modules\/quill\/assets\/icons\/(.*)\.svg$/rules.push({ test: quillIconsRegex, use: [{ loader: 'html-loader', options: { minimize: true } }], })

【解决方案3】：

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

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

【讨论】：