Disable ImagesLoader and use another one

[kubapyla]

Hi everyone, I've got a question about using different images loader than default. I want to copy images from ./src/assets/images/ to ./web/assets/images/, I know that default loader does that with every file included in .scss files, but not all of my image files are included in .scss files however I still want to copy them.

I have disabled it using disableImagesLoader() and tried using webpack-image-loader/copy-webpack-plugin with addLoader()/addPlugin(), but I've got this type of errors:

in ./src/assets/img/a.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

Here's my webpack.config.js

.setOutputPath('web/assets/')
.setPublicPath('/assets')
.cleanupOutputBeforeBuild()
.disableImagesLoader()

.addEntry('js/main', './src/assets/ts/main.ts')
.enableTypeScriptLoader(function (typeScriptConfigOptions) {
    typeScriptConfigOptions.transpileOnly = false;
    typeScriptConfigOptions.configFile = 'tsconfig.json';
})

.addStyleEntry('css/global', './src/assets/scss/theme.scss')

.addLoader({ test: /\.scss$/, loader: 'import-glob-loader' })

.enableSassLoader(function(sassOptions) {
    sassOptions.includePaths = [ './src/assets/scss/*', './src/assets/scss/*/*' ],
    sassOptions.outputStyle = 'compressed'
})

.enablePostCssLoader()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction());

I am aware about #24 but I haven't found an answer for that there.

[Lyrkan]

Hi @kubapyla,

The issue you're having comes from the fact that when you write something like background-image: url(assets/yourimage.png) in one of your scss files Webpack will try to load the image.

This is the default behavior of the css-loader and can't be disabled easily in Encore (ie. without messing with the generated config) since we only pass the following options to it:

webpack-encore/lib/loaders/css.js

Lines 23 to 36 in bcfbbfd

	const cssLoaders = [
	{
	loader: 'css-loader',
	options: {
	minimize: webpackConfig.isProduction(),
	sourceMap: webpackConfig.useSourceMaps,
	// when using @import, how many loaders *before* css-loader should
	// be applied to those imports? This defaults to 0. When postcss-loader
	// is used, we set it to 1, so that postcss-loader is applied
	// to @import resources.
	importLoaders: usePostCssLoader ? 1 : 0
	}
	},
	];

Because you also called disableImagesLoader() Webpack doesn't know how to import images anymore and starts yelling at you.

You should probably keep the images loader (the disableImagesLoader() method is mainly there in case you want to replace the default images loader, not remove it entirely) and only copy the images that were not imported in a file managed by Webpack (or copy all of them but you'll probably end-up not using some).

Note that if the images loader is enabled you can also do something like require('assets/image.png'); in one of your JS file.

[Lyrkan]

Closing this issue, feel free to reopen it if you need more explanation @kubapyla.

[CyrilKrylatov]

Hi @Lyrkan, thank you for you answer.

I kind have an issue with this: webpack copy & rename with hashs the images that are in my .scss files. I have:

.element {
 background: transparent url("../svg/icon-check_verified-gradient.svg") 0 50% no-repeat;
}

And then when I compile my SCSS file, I have a icon-check_verified.e4c9d2cb.svg file in built/image/ folder.

And it takes a lot of time to generate the hash, copy the files, rename them, etc. Like 2.5 seconds on a compilation when webpack is watching everything it's way too long:

I  21 files written to web/built
Hash: b12d85f4f25a20239a2e
Version: webpack 3.12.0
Time: 3825ms

What can I do about it?

Thank you!

[Lyrkan]

Hi @DaPo,

I think that's probably related to #253.

By default the resolve-url-loader is used for all the url(...) calls you have in your Scss/CSS files. It allows you to use paths that are relative to the file you are editing instead of having a unique root for all of them... however it can slow down your builds.

You could try disabling as explained in the other issue to check if that's the case.