CODEWITHSUNDEEP
symfonywebpacksasswebpack-encore
user2452046
user2452046

Reputation: 15

Webpack Encore delete my images

I'm facing problem with Webpack Encore and SCSS.

I have a SCSS file, an image, and Webpack Encore in my project. But when I compile with Webpack, it generates a copy of my original file logo.png into logo.<hash>.png, normal, but the image is not displayed and I can't even open it, the image is kind of deleted.

On the other side, all my generated images with CopyWebpackPlugin are readable but I can't access it from my SCSS...

Structure

/assets
    /images
        logo.png
    /scss
        app.scss
/public
    /build
        /css
            app.<hash>.css
        /images
            logo.<hash>.png

app.scss

div {
    background-image: url('../images/logo.png');
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');
var webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .enableSourceMaps(!Encore.isProduction())

    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    // IMAGES
    .addPlugin(new CopyWebpackPlugin([
        {
            from: './assets/images',
            to: 'images',
            force: true
        }
    ]))

    // CSS
    .addStyleEntry('css/app', [
        './assets/scss/app.scss',
    ])

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function(options) {
        // https://github.com/sass/node-sass#options
    })

    .addLoader({loader: 'shebang-loader'})

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    .enableBuildNotifications()
;

module.exports = Encore.getWebpackConfig();

Could someone tells me what I'm doing wrong

Upvotes: 0

Views: 963

Answers (1)

user1206570
user1206570

Reputation: 31

You can remove

.cleanupOutputBeforeBuild()

or add something like that: 

.cleanupOutputBeforeBuild(['static'], (options) => {
        options.verbose = true;
        options.root = __dirname;
        options.exclude = ['img'];
    })

Upvotes: 1

Related Questions