I need to import "desktop.scss" or "mobile.scss" in my astro "MainComponent".

So, based on ternary I have string "Desktop" or "Mobile" but when I try to import it, it always import both scss's.

First I tried:

import `../styles/${device}.scss`;

But I can't pass variable to import css.

Then I put scss import in 2 components: Desktop.astro and Mobile.astro which only job is to import scss:

import '../../styles/desktop.scss'

And Mobile.astro:

import '../../styles/mobile.scss'

Then in my MainComponent I tried:

const device = isMobile ? "Mobile" : "Desktop"
import(`../components/css/${device}.astro`)

It imports both scss files :(

Any idea?

I need to import "desktop.scss" or "mobile.scss" in my astro "MainComponent".

So, based on ternary I have string "Desktop" or "Mobile" but when I try to import it, it always import both scss's.

First I tried:

import `../styles/${device}.scss`;

But I can't pass variable to import css.

Then I put scss import in 2 components: Desktop.astro and Mobile.astro which only job is to import scss:

import '../../styles/desktop.scss'

And Mobile.astro:

import '../../styles/mobile.scss'

Then in my MainComponent I tried:

const device = isMobile ? "Mobile" : "Desktop"
import(`../components/css/${device}.astro`)

It imports both scss files :(

Any idea?

• reactjs
• import
• sass
• astrojs

1 Answer 1

Pretty sure this is done when you build the website. At that point you don't know whether any given user will be on mobile or desktop.

What you're looking for is CSS media queries.