reactjs - Use dynamic import for SCSS in ASTRO - Stack Overflow

admin管理员组

文章数量:1358165

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

Share Improve this question Follow edited Apr 1 at 8:17 Gnesh asked Apr 1 at 8:03 GneshGnesh 4511 silver badge1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： reactjsUse dynamic import for SCSS in ASTROStack Overflow