I'm not really into styling, I'm a programmer, so maybe I'm doing something wrong but I can't figure out how to deal with this problem: I have a SPA on reactjs which has admin dashboard and a landing page. Depending on whether user is logged in or not, different module is rendered on the same domain and url. The index.html page is very simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
There's a session check in index.js, and if user is logged in Dashboard is rendered to the app div instead of Landing. I didn't create dashboard style myself, I took a bootstrap template from the Internet with it's custom styles of course. I also have styles.scss file with the following contents:
@import "./custom";
@import "./font-awesome";
@import "./app/admin";
@import "./app/daterangepicker";
@import "./app/nprogress";
@import "./app/skin";
@import "./bootstrap";
This file is imported to index.js. The problem is that dashboard's custom styles conflict with my landing page's (which is also built with bootstrap) css styles.
So my first idea was to create 2 scss files with imports, one for dashboard and one for landing. But is there any way to attach different css files depending on what part of the application must be rendered and to be able to do it in a conditional statement without reloading the whole page in the browser? Or maybe there are some better ideas to get around this problem?