Webpack QuillJS выводит путь SVG, а не вставляет его - PullRequest
Новая
       10

Webpack QuillJS выводит путь SVG, а не вставляет его

0 голосов
/ 03 октября 2018

Я пытаюсь установить 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?Я предполагаю, что какая-то конфигурация загрузчика отсутствует или что-то в этом роде.

Я вставляю Quill как отдельные компоненты: 

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

Редактировать:

Я добавил HTML-загрузчик ввстроить svg`s в мой 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 в ./node_modules/quill/ui/icons.js
  • .. / assets / icons / align-justify.svg в ./node_modules/quill/ui/icons.js...

Тема путей правильная.Я совершенно не знаю, что здесь не так.

Спасибо за вашу помощь: -)

Ответы [ 3 ]

0 голосов
/ 22 мая 2019

Вам нужно будет отключить стандартный загрузчик изображений, добавив .disableImagesLoader() и добавив свой собственный, который исключает активы Quill.Я сделал следующее, адаптированный из этой проблемы , которая делает это для 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
    }
})
0 голосов
/ 01 июня 2019

Если ваша проблема касается Laravel Mix: на GitHub, то есть обсуждение о проблеме в самом 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 голосов
/ 15 марта 2019

Вы добавили svg к разрешенным расширениям файлов в конфигурации веб-пакета? 

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