No extract svg sprite if use mini-css-extract-plugin

[docccdev]

No extract svg sprite if use mini-css-extract-plugin.

Can you help me?

webpack 4 config:

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ExtractSvgSpritePlugin from 'extract-svg-sprite-webpack-plugin';

export default {
    ...
    rules: [
        {
            test: /\.css$/,
            loader: [
                {
                    loader: MiniCssExtractPlugin.loader,
                },
                {
                    loader: 'css-loader',
                },
            ]
        },
        {
            test: /\.svg$/,
            loader: [
                {
                    loader: ExtractSvgSpritePlugin.loader,
                },
            ]
        },
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new ExtractSvgSpritePlugin(),
    ],
}

[kisenka]

You need additional loader for CSS, see https://github.com/JetBrains/svg-mixer/tree/master/packages/extract-svg-sprite-webpack-plugin#example-config

[joepagan]

@kisenka what if you do not want svgs from css files in the sprite? Is there a way to do that without getting lots of errors & completing a build?

[IvanRodriCalleja]

Hi,

I have a problem when i try to configure the the loader. The cssLoader is traying to resolve inline image from node_modules, i have tryed to exclude node_modules for this loader but it not ignore the folder.

Error:

 ERROR in ./node_modules/react-day-picker/lib/style.css (./node_modules/css-loader??ref--5-1!./node_modules/resolve-url-loader!./node_modules/extract-svg-sprite-webpack-plugin/lib/css-loader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/react-day-picker/lib/style.css)
    Module build failed (from ./node_modules/extract-svg-sprite-webpack-plugin/lib/css-loader.js):
    Error: Can't resolve './data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==' in 'C:\git\SistemaParrillaPlain\src\FrontEnd\node_modules\react-day-picker\lib'

My config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractSvgSpritePlugin = require('extract-svg-sprite-webpack-plugin');

module.exports = isProdMode => ({
    module: {
        rules: [
          {
            test: /\.(sa|sc|c)ss$/,
            use: [
              {
                loader: isProdMode ? MiniCssExtractPlugin.loader : 'style-loader'
              },
              {
                loader: 'css-loader',
                options: {
                  minimize: true
                }
              },
              'resolve-url-loader',
              ExtractSvgSpritePlugin.cssLoader,
              'sass-loader'
            ]
          },
          {
            test: /\.svg$/,
            loader: [
              {
                  loader: ExtractSvgSpritePlugin.loader,
              }
            ]
          }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
          filename: isProdMode ? 'css/[name].[hash].css' : 'css/[name].css'
        }),
        new ExtractSvgSpritePlugin()
    ]
})

Do you know how can i fix it?

[kisenka]

@IvanRodriCalleja try to place ExtractSvgSpritePlugin.cssLoader right after css-loader

[IvanRodriCalleja]

I tried both and the result was the same.

[kisenka]

Looks like this was fixed in #56, try to update extract-svg-sprite-webpack-plugin to 0.4.0

[kisenka]

@IvanRodriCalleja still actual? :)

[kisenka]

@IvanRodriCalleja ping

[IvanRodriCalleja]

Sorry for the delay. Currently i am not using this approach, I can't say if it is working or notl.

[kisenka]

However I suggest to use extract-svg-sprite-webpack-plugin for sprite extraction.