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

CC BY-SA 4.0
2019-02-07T04:52:01.940Z
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
CC BY-SA 4.0
2019-02-06T22:50:13.530Z
2019-02-06T22:50:13.530Z
Jon Weedin
<p>Don't put your CSS and JS files in the <code>/templates</code> folder. Store them on the front-end in the <code>/web</code> folder.</p>

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

CC BY-SA 4.0
2019-02-07T06:12:52.413Z
2019-02-07T06:12:52.413Z
Lindsey D
<p>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).</p>

<p>For example, if you end you're CSS stylesheet with something like this;</p>

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

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

<p>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.</p>

<p>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;</p>

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

<p>Again the curly brackets breaks the loading of the .js file.</p>

<p>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 <code>{% do view.registerCssFile(url) %}</code> or <code>{% do view.registerJsFile(url) %}</code>.</p>

<p>Any simple workaround for this (maybe just loading with html like <code>&lt;script src="{{ path-to-file }}"&gt;</code>)?</p>

<templating><craft3>
Twig sometimes breaks JavaScript or CSS
# Twig sometimes breaks JavaScript or CSS

(Asked by: username_0 on 2019-02-06)

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

**Tags:** templating, craft3

---

## 2 answers

### Answer by username_2 on 2019-02-07. Score: 4 | Accepted answer

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.


---

### Answer by username_1 on 2019-02-06. Score: 0

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

> **Comments:**
> **username_0**: 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.  

---

