react-scripts build ignores conditional css imports

Question

I am trying to conditionally require css for my react project and it works locally. However, when the react-scripts build command is executed by react js all css files get bundled into one and the conditional import no longer works.

if(isSmartPhoneOrTablet()){
    require("./mobileStyle.css");
}else {
    require("./style.css");
}

"build": "react-scripts build"

Well that's literally just an if/else statement, so there's no way it can satisfy both conditions if just run once. Either that snippet is being run multiple times (and the condition outcome is changing), or the issue is somewhere else. Can you provide some relevant, basic info about the build configuration/process? — Jayce444
– Jayce444, Commented Jun 19, 2018 at 4:02
Sure, the npm run build command puts all the css into one file that the server uses. It does not seem to understand that some imports are conditional. In practice only one condition is executed (of course), but the problem occurs in the npm run build command which puts all the css into one file. — peter
– peter, Commented Jun 19, 2018 at 4:13
I'm....confused. How are you building (webpack?). And where are you doing this conditional importing? Is it within a component, or within your build script somewhere? Also, can you add the relevant code from your build script doing the CSS stuff. — Jayce444
– Jayce444, Commented Jun 19, 2018 at 4:27
The conditional importing is in all of my components (they each have their own css file). I added the build script above and I am not sure how I am building with webpack. I have not written any code to do with webpack. — peter
– peter, Commented Jun 19, 2018 at 4:35
Ok well then you won't be able to import from specific CSS files if those files don't exist after the app is built. They'd need to be kept separate rather than all combined into one big file. I'm not familiar with Heroku, but do you have access to that build script in the package.json? Or wherever it's combining the CSS into a single file? — Jayce444
– Jayce444, Commented Jun 19, 2018 at 4:44

Chris Aby Antony · Accepted Answer · 2018-06-19 04:03:29Z

1

You could try something like

var cssfile;
if(isSmartPhoneOrTablet()){
    cssfile = "./mobileStyle.css";
}else {
    cssfile = "./style.css";
}
require(cssfile);

answered Jun 19, 2018 at 4:03

Chris Aby Antony

8114 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Midhun Darvin Over a year ago

@petermir Did this work for you? You have marked it as a correct answer.

peter Over a year ago

No I use,if (isMobileOrTablet()) { module.exports = require("./mobileStyle.css"); } else { module.exports = require("./style.css"); }, but I had to change my build script to use webpack and create my own webpack configuration

Collectives™ on Stack Overflow

react-scripts build ignores conditional css imports

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related