我正在尝试学习使用 encore webpack。 好吧，按照本指南 Encore + webpack + bootstrap sass和本指南 Symfony 4+ enconre + Bootstrap 4我让 symfony 使用我使用的 scss 和 js Assets 。 但问题是当我在我的 scss 代码中插入图像(对于 bg)时，我在浏览器中看到的相对 url 是错误生成的。
Webpack 在这里生成图像:
public\build\images\2.f26e9a05.jpg
但浏览器中的 url 最终是这样的:
/public/build/build/images/2.f26e9a05.jpg
(如果我删除第二个“build/”，图像会像它应该的那样加载) 这是我的文件夹结构:
assets:
css:
app.scss
js:
app.js
public:
images:
2.jpg
应用程序.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>
最佳答案
我正在回答这个相当古老的问题，因为我假设在此期间关于 yarn watch 和公共(public)路径设置的一些事情已经发生了变化:
如果我这样做:
.setPublicPath('./')
yarn watch 感觉被冒犯了，并显示:
警告传递给 setPublicPath() 的值应该*通常*以“/”开头或者是一个完整的 URL (http://...)。如果您不确定，那么您可能应该更改您的公共(public)路径并使此消息消失。。
所以我认为这应该是这样的:
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/public/build')
// only needed for CDN's or sub-directory deploy
.setManifestKeyPrefix('public/build/')
所以公共(public)路径应该仍然是绝对的，而“ list 前缀”负责设置为子目录。
有关这方面的信息可以在这里找到:
只是为了正确性添加这个，因为我偶然发现了它，其他人也可能...
关于url - Encore webpack 或 Assets 在 symfony 4 中生成错误的图像路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51613055/