PHP Symfony webpack encore build does not contain all files

Question

currently I am writing a PHP application using Symfony 5. The project's build is created using webpack encore, in the root directory I got the assets directory which contains all the files (.js, .css, images) that should be included in the build output created by webpack. This directory is located in the public directory after I run the encore dev script and whenever I run this command the output directory contains all the files stored in the assets. But the problem is that when I run the project and navigate to locahost:8000, open the dev tools, and open sources tab, the build directory contains all the files, but when I for example navigate to localhost:8000/post/new it's missing some of this files, seems like it somehow fetched the old build directory. My webpack configuration file looks like that

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addLoader(      {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    },)
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')

    .copyFiles({
                 from: './assets/images',
        
                 // optional target path, relative to the output dir
                 to: 'images/[path][name].[ext]',
        
                 // if versioning is enabled, add the file hash too
                 //to: 'images/[path][name].[hash:8].[ext]',
        
                 // only copy files matching this pattern
                 //pattern: /\.(png|jpg|jpeg)$/
             })

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .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;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Do I need to somehow tell weback that all the files from build directory should be included?

EDIT Okay, so I checked the console for localhost:8000/post/new and it looks like that

GET http://localhost:8000/post/build/images/logo.svg 404 (Not Found)
GET http://localhost:8000/post/icon.svg 404 (Not Found)

So Symfony is trying to fetch these files from /post instead of /. How can I prevent it?

Answer 1

Inside app.js, you should include scss file

import './app.scss';

Are you adding assets in twig like this? If Yes, then It will work

In Head

{% block stylesheets %}
   {{ encore_entry_link_tags('app') }}
{% endblock %}

And In Body

{% block javascripts %}
    { encore_entry_script_tags('app') }}    
{% endblock %}