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

Posted 2023-03-28

【中文标题】Webpack QuillJS 输出 SVG 路径而不是内联它

【英文标题】：Webpack QuillJS outputs SVG path instead of inlining it

【发布时间】：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 ...

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

感谢您的帮助:-)

【问题讨论】：

你找到解决这个问题的方法了吗？

你有什么解决办法吗？

【参考方案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'],