Stylesheets being blocked from loading in React app hosted test

Extensions
1

Hi,
For some reason my stylesheets are being blocked from loading when I move to a Hosted Test. Everything in the extension looks correct when doing a Local Test or when using the Dev Rig, but as soon as I run a production build and upload the assets, it no longer loads the stylesheets. You can see in the network logs screenshot below the stylesheet blobs are being blocked. Does anyone know why this would happen only in a Hosted Test? My extension is based on the react app boilerplate from Twitch and the only change I have made to the webpack config is to allow for css modules (which works fine in local testing) like this:

        {
          test: /\.scss$/,
          use: [
            { loader: "style-loader" },
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                modules: true,
                sourceMap: true,
              },
            },
            { loader: "sass-loader" },
          ],
        },

image
image1568×851 93 KB

2

You should make sure your loader doesn’t put the style in your HTML file and keep it in separates files.
Check the CSP error :slight_smile:

3

@Breci So this extension is a video overlay extension, so its running in the twitch sandbox iframe. Is there a way I can change the CSP settings for the iframe?

4

No the CSP is set by Twitch. And cannot be changed.

You are not allowed to use inline styles, which is what we predict you are running into.