Answers.Body: <p>Try using <code>{% verbatim %}CSS or JS code here{% endverbatim %}</code>. Twig won't process text inside the <code>verbatim</code> tags.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T04:52:01.940Z
Answers.Text: 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.
Answers.UserDisplayName: Anders
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-06T22:50:13.530Z
Answers.LastActivityDate: 2019-02-06T22:50:13.530Z
Answers.UserDisplayName: Jon Weedin
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T06:12:52.413Z
Answers.LastActivityDate: 2019-02-07T06:12:52.413Z
Answers.UserDisplayName: Lindsey D
Body: <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>
  
Tags: <templating><craft3>
Title: Twig sometimes breaks JavaScript or CSS
ThreadText: # 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 `<script src="{{ path-to-file }}">`)?
  
  **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.  
  
  ---
  
  