I am trying to learn to use encore webpack. Well, following this guideEncore + webpack + bootstrap sass and this guide Symfony 4+ enconre + Bootstrap 4 I got symfony to use the scss and js assets I use. But the problem is when I insert an image in my scss code (for a bg) the relative url I see in the browser is wrongly generated.
Webpack is generating the image here:
public\build\images\2.f26e9a05.jpg
But the url in the browser ends up like this:
/public/build/build/images/2.f26e9a05.jpg
(if I delete the second "build/" the image loads like it should) this is my folder estructure:
assets:
css:
app.scss
js:
app.js
public:
images:
2.jpg
app.scss:
@import '~bootstrap/scss/bootstrap';
...
.parallax {
background-image: url("images/2.jpg");
}
Webpack.config.js:
var Encore = require('@symfony/webpack-encore');
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')
// the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// the following line enables hashed filenames (e.g. app.abc123.css)
//.enableVersioning(Encore.isProduction())
// uncomment to define the assets of the project
.addEntry('app', './assets/js/app.js')
//.addStyleEntry('css/app', './assets/css/app.scss')
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use Sass/SCSS files
.enableSassLoader()
// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
index.html.twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}100Monos{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
{% endblock %}
</head>
<body>
<div class="container">
{% block body %}
<div id="Nosotros" class="pantalla d-flex align-items-center parallax">
<div class="contenido">
<h1>100Monos</h1>
<h3>Nuestra Web es mala porque pasamos todo el tiempo haciendo la suya</h3>
<img src="{{ asset('images/1.jpg') }}">
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('build/app.js') }}"></script>
{% endblock %}
</div>
</body>
</html>