Css images not loading webpack

I’m trying to load css background images with webpack but when compiling I’ve got this:

background:url([object Module])

These are parts webpack.config.js

.setOutputPath('public/build/')
.setPublicPath('/build')

I’m using file loader as I find in some posts and esModule to trying object module issue:

.addLoader({
    test: /.(png|jpg|jpeg|gif|ico|svg|htc)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                esModule: false,
            },
        }
    ]
})

Here is my custom *.js with *.css requires inside

.addEntry('home', './assets/js/home.js')

When launching yarn encore dev all files are copied to my public/build/ folder and home.css file is generated. When open I can see the first line issue mentioned (.header h1{ background:url([object Module]); display:block; float:left; width:150px; height:50px;})

Furthermore, for some reason, when checking diles copied to build directory a kind of hash is between file name and extension. I don’t know if this could be afecting.

enter image description here

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *