Encore webpack或资产在symfony 4中生成错误的图像路径-Java 学习之路

我正在努力学习使用安可webpack . 那么，按照本指南Encore + webpack + bootstrap sass和本指南Symfony 4+ enconre + Bootstrap 4我得到symfony来使用我使用的scss和js资产 . 但问题是当我在我的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

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>

1 回答

1
在测试了很多东西之后，我在最后解决了它 . 有两个问题我不断重复 . 首先，路径是以不相对的方式生成的，解决它改变webpack用这个：
```
.setPublicPath('./')
```
但是scss没有加载，会发生什么？好吧，前缀是问题所在，因为当你把前缀放在资产函数中时，它会接受前缀并为公共路径更改它...所以我更改了前缀
```
.setManifestKeyPrefix('webpack/')
```
（真的是随机的）
回复于 2024-04-30T05:32:05+08:00

Encore webpack或资产在symfony 4中生成错误的图像路径

1 回答

相关问题