# Extension boilerplate not using CSS in developer rig (or otherwise)

**URL:** <https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284>\
**Category:** Extensions\
**Created:** [October 23, 2021, 7:30pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284 "2021-10-23T19:30:37Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 7:30pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/1 "2021-10-23T19:30:38Z")

</div>

Being brand new to Twitch extensions and also learning React, I have created a project using the Extension boilerplate code. I have successfully created the extension and downloaded the code, I have it running on a local secure server and serving to the dev rig.  
Problem is, the CSS is somehow getting stripped along the way. I make changes to App.css and save and the dev rig extension refreshes and the system expects and knows that App.css is there (it complains if I mess up syntax or remove the file), yet when I drill down in dev tools on the rig, there are no CSS properties attached to the DOM objects…  
Any help would be much appreciated.  
On another note, if i put my code into the unauthed part of the App.js, again, the DOM objects show on a regular browser, but there is no CSS being passed, so it’s something in the boilerplate that I’m missing and not the rig.

I can create a project using create-react that will serve to a normal page with all the css, but have not gotten it to load into the dev rig yet.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 7:33pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/2 "2021-10-23T19:33:31Z")

</div>

Sounds like `App.css` fails to load (checking Network Tools)  
As the path to it is wrong?

Likely a 404 error as it’s not where it’s supposed to be

---

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 7:36pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/3 "2021-10-23T19:36:22Z")

</div>

Thanks for the quick reply!  
It’s in the right place and expected by the server. If I remove it, the server complains “can’t resolve” - that it can’t be found, if I put it back, the server stops throwing the error.

The content is served, no errors in log, just CSS stripped.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 7:37pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/4 "2021-10-23T19:37:37Z")

</div>

No idea then.

Sounds like a standard web development problem and not a “rig” or extensions problem.

Something specific to your setup somewhere.

or a syntax error in your file, breaking the whole file.

Also Extensions are probably not the best thing to learn React with. As extensions have some abnormal development requirements. (Such as you can’t navigate anywhere which screws with Routers and Router handling)

---

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 7:49pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/5 "2021-10-23T19:49:53Z")

</div>

I’m fine with that being the issue, I’m trying to narrow down why.  
That I understand, I should be able to download the boilerplate, get it served and running (it has the auth and twitch includes itself) and start making changes, no?

I have noticed on reinstalling the rig and downloading a fresh boilerplate that it starts with the css stripped, the ‘App-light’ class gets assigned by the boilerplate, but there are no CSS properties attached, although the boilerplate specifies different text colors.  
This is without me having touched any of the code.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 8:16pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/6 "2021-10-23T20:16:13Z")

</div>

I was unable to replicate this problem

 ![image](https://d2spem0quai2ol.cloudfront.net/original/2X/b/bbfc1028cd678bdece31824661410cbf2f0916ad.png)

The rig/inspector did take a little while to pick it up. But them this “test” has 8 different views in the project.

 ![image](https://d2spem0quai2ol.cloudfront.net/original/2X/c/c8de58c21f7df2b6c377ff956364c7268870400a.png)

---

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 8:21pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/7 "2021-10-23T20:21:07Z")

</div>

Appreciate you testing.

For the record- what mine looks like:

 ![Capture](https://d2spem0quai2ol.cloudfront.net/original/2X/c/ce2c5c45ca2a91f9b643784863bdd762640af38a.png)

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 8:46pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/8 "2021-10-23T20:46:11Z")

</div>

Look in `<head>` so see if the `<style>` is there.

This example seems to place the CSS inline (which is invalid when it comes to extensions but this only applies for hosted test/release where the CSP is actually applied)

---

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 8:54pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/9 "2021-10-23T20:54:02Z")

</div>

There is no style call in the header…

How do I figure out what step it breaks at? App.js imports App.css meaning anything that App is passed to should also pull the stylesheet, no?

This is infuriating because all the functionality is, well, functioning. It’s just the styling that is broken without throwing any errors anywhere.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 8:55pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/10 "2021-10-23T20:55:33Z")

</div>

Something weird in the React stack somewhere.

And I don’t use React so I’m not sure, (too much bloat)  
Really shouldn’t be using inline styles.

---

<div class="post-metadata">

**Author:** ![randopixel](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/randopixel/32/14160_2.png) [@randopixel](https://staging-discuss.dev.twitch.com/u/randopixel)\
**Post date:** [October 23, 2021, 8:57pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/11 "2021-10-23T20:57:56Z")

</div>

I assumed the inline styles were injected by the dev rig. They aren’t there when I run anything directly to the browser.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 23, 2021, 8:58pm UTC](https://staging-discuss.dev.twitch.com/t/extension-boilerplate-not-using-css-in-developer-rig-or-otherwise/34284/12 "2021-10-23T20:58:58Z")

</div>

And yet they appeared for me.

The rig won’t block the `<style>` appearing in the raw HTML.