1

Sometimes when your javascripts or stylesheets are formatted a certain way, twig seems to try and render those snippets (whom always include curly brackets in some way).

For example, if you end you're CSS stylesheet with something like this;

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

(I can't remember the exact case off the top of my head, but I believe this is it)

The stylesheet won't render, as twig throws an exception giving you a 500 error. It seems to be that the curly brackets (two next to each other in the flow) gets interpreted as twig.

The same goes for JavaScript, where a concrete example is instafeed.js if you import and compile with Parcel or Webpack or the likes, there's a line of code in that library that makes the .js file throw a 500 error because twig interprets the file. Specifically this line;

pattern = /(?:\{{2})([\w\[\]\.]+)(?:\}{2})/;

Again the curly brackets breaks the loading of the .js file.

I actually haven't gotten around to simply loading the javascript and css though basic tags in the html, so it might be that the issue is only present when loading through {% do view.registerCssFile(url) %} or {% do view.registerJsFile(url) %}.

Any simple workaround for this (maybe just loading with html like <script src="{{ path-to-file }}">)?

3

Don't put your CSS and JS files in the /templates folder. Store them on the front-end in the /web folder.

If they're not in the templates folder, Twig won't try to parse them.

|improve this answer|||||
0

Try using {% verbatim %}CSS or JS code here{% endverbatim %}. Twig won't process text inside the verbatim tags.

|improve this answer|||||
  • It's actually not inline css or js, but loading external files. Very strange, and I seem to recall having seen a post about it online. No solution though, so it might be an inherent problem in twig. – Anders Feb 7 '19 at 4:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.