Sylius: How to add custom CSS/JS need to register paths for namespace 'App'

[Vegekku]

Sylius docs version: 1.x / latest

Description
After following _How to add custom CSS to Admin?_ I got an exception during the rendering of a template (There are no registered paths for namespace "App".) because of this '@@App/Admin/_stylesheets.html.twig'.

Searching I found in Symfony doc how to solve registering my own Namespace. I think you must include some reference to this. I fixed including below code to app/config/config.yml

twig:
    paths:
        '%kernel.project_dir%/src/AppBundle/Resources/view': App

After solve that, I found another error because it doesn't find template "SyliusUiBundle::stylesheets.html.twig", because the correct name is "SyliusUiBundle::_stylesheets.html.twig"

Thanks a lot for Sylius Project, I'm learning a lot.

[zemeja]

I confirm, that this issue still persists in 1.3.7. version and its documentation:
https://docs.sylius.com/en/1.3/customization/template.html
You have to manually add namespace 'App' to config/packages/twig.yaml in order to use sonata_block_render_event the same way as its used in documentation example.

[migmolrod]

Somewhat related to this, I find more problems in that documentation. For example, it says you have to create your assets in <project>/public/assets/whatever folders. But... <project>/public/assets/* is completely ignored in the .gitignore file by default to start with.
Plus I don't feel like placing that kind of 'temporal' assets in the <project>/public folder when Symfony recommends to have a <project>/assets folder in this Web Assets (Symfony Best Practices) article:

Store your assets in the assets/ directory at the root of your project.

How do you personally manage this? I'm trying to find a clean way to do it.

[gaugau3000]

Still the case in v1.5 .

I change the config/packages/twig.yaml from :

twig:
    paths:
      ['%kernel.project_dir%/templates']
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'

to :

twig:
    paths:
      '%kernel.project_dir%/templates': App
      '%kernel.project_dir%/src/Resources/views': App
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'

it works but :

• it is the good way to do ?
• it have to be by default include in the framework or explain in the documentation ?

What is sure is that it have to be solve/explain somewhere because for newbies like me quite confusing when you start to use a framework.

Depending your responses i can make a PR.

Many tks. Have nice day.

[migmolrod]

In my particular case I ended up placing those templates in the templates folder just to have all them together. So I have them in
templates/App/Admin/_stylesheets.html.twig
and
templates/App/Admin/_javascripts.html.twig

Then this will just work:

services:
    # Custom assets
    app.block_event_listener.admin.layout.javascripts:
        class: Sylius\Bundle\UiBundle\Block\BlockEventListener
        arguments:
            - 'App/Admin/_javascripts.html.twig'
        tags:
            - { name: kernel.event_listener, event: sonata.block.event.sylius.admin.layout.javascripts, method: onBlockEvent }
    app.block_event_listener.admin.layout.stylesheets:
        class: Sylius\Bundle\UiBundle\Block\BlockEventListener
        arguments:
            - 'App/Admin/_stylesheets.html.twig'
        tags:
            - { name: kernel.event_listener, event: sonata.block.event.sylius.admin.layout.stylesheets, method: onBlockEvent }

One of the goals of the directory structure in Symfony 4 is to avoid having resources scattered all around your project (config, src, public).
And this way I don't need to worry about paths in Twig config either.

[gaugau3000]

@migmolrod hi :-)

I am interested how you have deal with

Somewhat related to this, I find more problems in that documentation. For example, it says you have to create your assets in /public/assets/whatever folders. But... /public/assets/* is completely ignored in the .gitignore file by default to start with.
Plus I don't feel like placing that kind of 'temporal' assets in the /public folder when Symfony recommends to have a /assets folder in this Web Assets (Symfony Best Practices) article:

Store your assets in the assets/ directory at the root of your project.

How do you personally manage this? I'm trying to find a clean way to do it.

because i write my own gulp functions that do what webpack do but i am not sure if it is the best way.

Many tks

[migmolrod]

Hi, @gaugau3000
Pretty much like this PR #10333 but with these changes:
https://github.com/Sylius/Sylius/issues/10332#issuecomment-500918661

Essentially you have your own gulpfile.babel.js that will create the public/assets/admin/css/custom.css and the public/assets/admin/js/custom.js mentioned in Sylius documentation How to customize Admin JS & CSS every time you run yarn build.

I'm not at work right now. Will be in about 20 mins so if you have more questions I can answer with actual code like a gist or something. Ask here or in sylius-devs slack :)

[lchrusciel]

Documentation should be updated to reflect current Symfony recommendation in templates naming