CSS stylesheets are not loading in the development environment

🧑‍💻 Technical Support
,
1

Hi,

I haven’t used Niantic Studio in a few weeks.

I’ve returned to one of my ongoing projects, and when I test it via Connect Device > Scan QR Code, the experience opens in Safari but the CSS doesn’t load correctly, it looks broken or missing.

However, when I push the project to staging, everything loads perfectly and the styles appear as expected.

I normally import my CSS files at the top of my “UI component”, for example:

import * as ecs from '@8thwall/ecs'
const {XR8} = window as any

import '../../css/main.css'
import '../../css/button.css'

ecs.registerComponent({
name: 'Recenter Button',
...
})

Alternatively, I can create a main CSS component that I load at the beginning of the project and persist across all spaces, for example:

import * as ecs from '@8thwall/ecs'  // This is how you access the ecs library.

import '../../css/main.css'
import '../../css/button.css'
import '../../css/chat-logs.css'
import '../../css/loader.css'
import '../../css/landing.css'
import '../../css/mic.css'

ecs.registerComponent({
  name: 'css',
})

However, when I load the project via the QR code, the UI appears scaled down and doesn’t render correctly.

Below are two screenshots of my custom landing page one from the development build and one from staging:

DEV:

dev
dev738Ă—1600 77.2 KB

STAGING

staging
staging738Ă—1600 96.8 KB

As you can see, in the development build the text, button, and others elements are not sized correctly compared to the staging version.

Is there something wrong in how I load the css? How can I fix this issue on the development environment?

Thank you. Any help would be greatly appreciated.

2

You likely aren’t using the right scale units in your CSS. Can you share what it looks like?