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

gdx19jrr 于 2022-11-24 发布在 Webpack

关注(0)|答案(5)|浏览(201)

我试图安装QuillJS与Symfony-Encore。不知何故，工具栏的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？我猜是某种加载器配置丢失了或者像这样的smth。
I将Quill作为单独组件嵌入：

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

编辑：

我添加了HTML-Loader来将svg内嵌到我的HTML中，配置如下：

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

我现在收到这个错误。
找不到这些相关模块：

第一次访问时，您将看到一个页面，其中包含了一个页面名称。
我的意思是说，如果你想在一个新的环境中工作，那么你可以在这个新的环境中工作。
我的意思是说，如果你有一个新的用户，你就可以使用它了。
我的朋友们，我的朋友们......
......“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”

路径主题是正确的。我完全不知道这里出了什么问题。
感谢您的帮助：-）

webpack

来源：https://stackoverflow.com/questions/52616753/webpack-quilljs-outputs-svg-path-instead-of-inlining-it

5条答案

按热度按时间

hmae6n7t1#

如果您的问题与Laravel Mix有关：on GitHub there is a discussion关于Mix本身的问题，以及涉及修改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()

赞(0）回复(0）举报 2022-11-24

pxyaymoc2#

您需要通过添加.disableImagesLoader()来禁用标准的图像加载器，并添加您自己的图像加载器，这将排除Quill资产。

.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
    }
})

赞(0）回复(0）举报 2022-11-24

ijxebb2r3#

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

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

赞(0）回复(0）举报 2022-11-24

dfty9e194#

我在这里找到了解决方案https://www.kohrvid.com/blog/posts/using-quilljs-with-rails-6
只需使用svg-inline-loader

赞(0）回复(0）举报 2022-11-24

wnvonmuf5#

只需将import语句替换为import Quill from 'quill'即可。
我遇到了同样的问题，问题是使用import Quill from 'quill/core'（在我的例子中是import Quill from 'quill/quill'）并没有导入所有必要的模块和资产，而在您的例子中只是导入Quill核心。

赞(0）回复(0）举报 2022-11-24

我来回答

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

编辑：

5条答案

相关问题

热门标签

最新问答