我可以将 webpack 'copyFiles' 与 twig.paths 配置结合使用吗

Question

我正在使用 webpack encore，所以这是我用来复制文件的 webpack.config :

# webpack.config.js
Encore
    // -- 37 lines --
    .copyFiles({
        from: './assets/images',
        pattern: /\.(png|jpg|jpeg|ico)$/,
        // to path is relative to the build directory
        to: 'images/[path][name].[hash:8].[ext]'
    })

;

我所有的图片文件都在./assets/images.

现在我运行yarn watch

所以我的图像被复制到 public/build/images 中，如 manifest.json 所示：

# public/build/manifest.json

{
  "build/app.css": "/build/app.css",
  "build/app.js": "/build/app.js",
  "build/mail.css": "/build/mail.css",
  "build/mail.js": "/build/mail.js",
  "build/runtime.js": "/build/runtime.js",
  "build/vendors~app.js": "/build/vendors~app.js",
  "build/fonts/fontawesome-webfont.ttf": "/build/fonts/fontawesome-webfont.1e59d233.ttf",
  "build/fonts/fontawesome-webfont.woff2": "/build/fonts/fontawesome-webfont.20fd1704.woff2",
  "build/fonts/fontawesome-webfont.eot": "/build/fonts/fontawesome-webfont.8b43027f.eot",
  "build/fonts/fontawesome-webfont.woff": "/build/fonts/fontawesome-webfont.f691f37e.woff",
  "build/images/favicon.ico": "/build/images/favicon.c48cee16.ico",                       <-- This one
  "build/images/fontawesome-webfont.svg": "/build/images/fontawesome-webfont.c1e38fd9.svg",
  "build/images/logo.png": "/build/images/logo.63e19ce5.png"                              <-- This one
}

然后我尝试在我的 twig.yaml 文件中设置别名

# config/packages/twig.yaml
twig:
   default_path: '%kernel.project_dir%/templates'
   paths:
       '%kernel.project_dir%/public/build/images/': images
       '%kernel.project_dir%/public/build/': build

我使用别名在 base.html.twig

中获取我的图像

# template/base.html.twig
<link rel="shortcut icon" href="{{ asset("@images/favicon.ico") }}" type="image/x-icon" />

我也尝试过使用这种语法：

# template/base.html.twig
<link rel="shortcut icon" href="{{ "@images/favicon.ico" }}" type="image/x-icon" />

但它不起作用。

唯一有效的语法是：

# template/twig.yaml
<link rel="shortcut icon" href="{{ asset("build/images/favicon.ico") }}" type="image/x-icon" />

那我做错了什么？在复制包含哈希的文件时甚至可以使用别名吗？我可以在尝试使用 copyFiles 之前使用别名。

Answer 1

我在这里找到了答案：

这对我有用。

只是不要忘记清理缓存 (php bin/console c:c)

现在我的代码如下所示：

# config/packages/twig.yaml
twig:
    paths:
      '%kernel.project_dir%/public/build/images/': images
      '%kernel.project_dir%/public/': build

# templates\Mailer\password_reset.html.twig
...
<img src="{{ email.image('@images/' ~ asset('build/images/logo.png')|split('/')[3]) }}" alt="Logo">
...

如果这样做之后仍然有错误，请尝试 copy/path config/packages/twig.yaml 到 config/packages/env/twig.yaml （用您的环境名称替换环境）

尽管有点老套，但它确实有效。

Answer 2

对您的问题的简短回答：不，您不能将 webpack copyFiles 和 twig.paths.

结合使用

Namespaced Twig paths 仅供 Twig 文件加载器使用，因此它仅在您包含、导入、扩展或嵌入 Twig 文件时有效。

我可以将 webpack 'copyFiles' 与 twig.paths 配置结合使用吗

Can i combine webpack 'copyFiles' with twig.paths configuration

html

css

symfony

twig

webpack