CODEWITHSUNDEEP
cssreactjsuser-agent
munk33
munk33

Reputation: 19

React – Import Stylesheet **only if** UserAgent is Mobile

Would like to import a mobile-specific stylesheet ONLY IF the UserAgent is mobile.

Integrated this UserAgent detection package, so we can successfully detect the UserAgent: https://www.npmjs.com/package/react-useragent

Just don't know how to import mobile.css ONLY WHEN UserAgent is mobile. Thank you!

/* only load mobile.css if UserAgent is mobile */
import styles from '../../mobile.css';

Upvotes: 1

Views: 794

Answers (1)

Carol Chen
Carol Chen

Reputation: 997

Conditional imports do exist! It's in Webpack 2! Here's the git repo with examples and use cases

if (agent === whateverYouWant) {
    import('./mobile.css').then(() => {
       console.log("Imported mobile css");
    });
}

Additionally, you can also use require in conditionals.

Upvotes: 2

Related Questions