webpack encore symfony with VueJS SFC file into style part with css url file path

Question

Into a Symfony5 project I use VueJS framework with SFC (Single File Component).

Into my components VueJS style part I need to use "url" css rule with file path definition.

In particulary for background-image design div like this :

<style lang="scss" scoped>

    #presentation
    {
        height: 800px;
        width: 100%;
        background-image: url('/build/images/presentation.jpg');
    }

</style>

My webpack configuration seems to be good for serve public directory because my image is available in my browser with this url : "https://mydomain/build/images/presentation.jpg"

But when I run : npm run dev

for launching webpack encore dev, the process throw error and tell that :

Module build failed (from ./node_modules/@symfony/webpack-encore/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/build/images/presentation.jpg' in '/var/www/myproject/assets/components'

Webpack encore config :

const Encore = require('@symfony/webpack-encore');
const webpack = require('webpack');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVueLoader()
    
    .addEntry('app', './assets/app.js')
    .addEntry('index', './assets/index.js')
    
    .addLoader({
        test: /\.(jpg|png|svg|gif)$/,
        type: 'asset/resource',
    })

    .enableStimulusBridge('./assets/controllers.json')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    
    .addPlugin(new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: true
    }))

    .enableSassLoader()

    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|jpg|jpeg)$/
    })
;

module.exports = Encore.getWebpackConfig();

• I checked my public web server directory which target my public directory project index symfony very well
• I try lot of things of path but the same error throw

Is there css-loader or vue-loader which throw or config error ?

How can I correctly "loading" file path into style part of component VueJS ?

I need custom rules config of vue-loader or css-loader ?

Answer 1

My technical context do not help me to easily understand what is wrong. Because one component VueJS is used by Storybook AND Symfony with 2 differents webpack config.

But I solve my issue thank to 2 thinks :

• first for symfony part : use the ~ character into begin of my url resource file

  background-image: url('~/assets/images/lopitofuritarus.jpg')

• second for storybook part : do not use file-loader with css-loader test: /.(png|jpe?g|gif)$/i, use: [{loader: 'file-loader'}],

Perhaps it can help someone...