# Slim Twig View rendering - CSS and JS not working

**URL:** <https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400>\
**Category:** Questions\
**Created:** [September 13, 2020, 11:21pm UTC](https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400 "2020-09-13T23:21:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![basusingh](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/basusingh/32/1237_2.png) [@basusingh](https://discourse.slimframework.com/u/basusingh)\
**Post date:** [September 13, 2020, 11:21pm UTC](https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400/1 "2020-09-13T23:21:59Z")

</div>

I’m trying to render a page on my website. I am using Slim Framework with Twig. When I put the HTML file in a different directory (other than Slim), it works perfectly.

 ![Screenshot (17)](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/d/d2617dd8ea893b2cc4622d33ccc91f0a343023d1.png)  
But when I try to render it using Slim and Twig, I get this:  
 ![Screenshot (16)](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/3/35cf430e40778d987a2d26c75ecf823be49e6d8d.png)  
Seems like the CSS and the JS is not working. Also, if it works elsewhere, there must be something wrong with Twig and Slim. Here’s the source code of the HTML:  
[HTML Source Code](https://gist.github.com/basusingh/c62bb63e235093ec23eebe6961cf28e8)

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [September 14, 2020, 10:06am UTC](https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400/2 "2020-09-14T10:06:18Z")

</div>

Not sure, but `baseUrl()` seems suspicious to me.  
I think the correct Twig-View function name is [base\_path()](https://github.com/slimphp/Twig-View#custom-template-functions)

---

<div class="post-metadata">

**Author:** ![basusingh](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/basusingh/32/1237_2.png) [@basusingh](https://discourse.slimframework.com/u/basusingh)\
**Post date:** [September 14, 2020, 10:35am UTC](https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400/3 "2020-09-14T10:35:36Z")

</div>

Thank you, I will try this.

---

<div class="post-metadata">

**Author:** ![basusingh](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/basusingh/32/1237_2.png) [@basusingh](https://discourse.slimframework.com/u/basusingh)\
**Post date:** [September 14, 2020, 2:41pm UTC](https://discourse.slimframework.com/t/slim-twig-view-rendering-css-and-js-not-working/4400/4 "2020-09-14T14:41:06Z")

</div>

I have solved this using:

1. Changing the file extension to .html
2. Using base\_path() to get the base URL as suggested by @odan