use diferent input file for sprite

[vasil-stoilov]

Hello, I'm trying to use your plugin, but I don't find a way for diferent input file(for example sprite_input.css where I'll have only the icons I want to be in the sprite) and the plugin generates me many errors becaouse it's start working with .svg images that I have in my main css.
My configuration is:
npm -v: 5.6.0
webpack -v: 4.5.0
webpack.config.js:

var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const ImageSpritePlugin = require('image-sprite-webpack-plugin');
module.exports = {
	mode: 'development',
	entry: './account.index.js',
	output: {
		path: path.resolve(__dirname, 'js'),
		filename: 'webpack.bundle.js',
		publicPath: './js'
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '../assets/account/styles/style_account.css'
		}),
		new ImageSpritePlugin({
			commentOrigin: true,
			compress: false,
			extensions: ['png', 'jpg', 'jpeg'],
			indent: '  ',
			log: true,
			outputFilename: 'css/sprite-[hash].png',
			padding: 10,
			suffix: ''
		})
	],
	module: {
		rules: [{
			test: /\.(scss)$/,
			use: [
				MiniCssExtractPlugin.loader,
				{
					loader: 'css-loader',
					options: {
						url: false,
						sourceMap: true
					}
				},
				{
					loader: 'postcss-loader',
					options: {
						sourceMap: true,
						plugins: [
							new autoprefixer
						]
					}
				}, {
					loader: 'sass-loader',
					options: {
						sourceMap: true,
						precision: 8,
						indentType: 'tab',
						indentWidth: 1,
						outputStyle: 'expanded'
					},
				}
			],
		}, {
          	  test: /\.(png|gif|jpg)$/,
          	  loader: 'file-loader',
          	  options: {
          	        name: '../assets/account/styles/sprite.png'
                   }
            }]
	},
	watch: true
};

p.s. Sorry if my question is stupid, but I'm new in webpack and there are many thing that I still don't know :)

[hwshim]

@vasil-stoilov Thank you for your question.

Thanks to you, I have found that there was a bug related to the svg file.
And now, hot fix version 0.2.2 has been published so you can try again.

  "devDependencies": {
    ...
    "image-sprite-webpack-plugin": "^0.2.2",
    ...
  },

By the way, I discovered your webpack.config.js, and I would like to recommend a few things.

• It is recommended that you use a file-loader to automatically move and access image resource files.

• With respect to mini-css-extract-plugin and svg, please refer to the webpack4-mini-css-extract-multiple-chunks-svg example.

• The above example's webpack.config.js could be helpful, since it is similar to your webpack.config.js

• If you want split your css assets, Extracting CSS based on entry could be helpful.

• This plugin has not been tested with sass-loader, so if you find problems, feel free to report us again.

Thanks!

[vasil-stoilov]

Hello @hwshim

I've updated the plugin to 0.2.2 version and tryed the examples you've gave me, also the file-loader is included now(you can see it in my webpack.config.js above updated), but it still gives me the same eror for svg.
... [image-sprite] × 'url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")' skipped. Please use 'background-repeat' as 'no-repeat'
[image-sprite] × 'url("../../libs/OwlCarousel-2.3.3/img/owl.video.play.png") no-repeat' skipped. Please use as '0 0'
[image-sprite] × 'url(../../common/images/flags_svg/4x3/eu.svg)' skipped. Please use 'background-repeat' as 'no-repeat' ...

Is there a way to ignore .svg files, because I don't need them in sprite, or better is there a way to make a scope of classes or different .css/scss input file with icons that will be in the sprite, because not all the icons in my css are ment to be in sprite?
Sorry if my questions are looking stupid for you, but I'm new in webpack and I'm still trying to figure out what is what.

[hwshim]

Hi, @vasil-stoilov

• This plug-in converts only bitmap images to sprites.
• width, height and background (with no-repeat and <position>) properties are mandatory to create a sprite. Because they are required to calculate each sprite's position and dimensions.
• This plugin does not support 'data-url', such as background: url(data:image/gif;base64,R0lGODlhGAAYAPA..., it would be skipped.

The above log messages are not meant to be errors.
It's just a message that which resources have been skipped.

How about trying this code.

someYourClass {
  background: url("../../libs/OwlCarousel-2.3.3/img/owl.video.play.png") no-repeat 0 0'
}

Thanks!

[vasil-stoilov]

Hi @hwshim
I get it now, I was thinking that this is error message.

Do you think about putting an option for input file with scope of icons that are ment for sprite, because now it's not working for my project?

Even though Thanks for the great work you do :)

[hwshim]

Sorry, we don't have a plan for scope of icons for sprite.
Thank you for your interest :)