React で 状態やURLパスによって読み込むcss(scss)を変えたい

Question

前提・実現したいこと

React 16.8.6 を使っています。
URLパスや、何か状態によって 読み込む css を変更することができるものでしょうか？

管理画面は以下のような画面
https://jslancerteam.github.io/crystal-dashboard/#/

トップページなどは以下のような画面
https://startbootstrap.com/previews/creative/

を例えば考えていた場合、htmlのcssデザインがまったく違うので
ログイン前とあとで（もしくはurlパスで)読み込むcssを完全に変えれないかと考えております。

地道にcss作るのもせつないので、既存のbootstrapのテンプレートを状態やパスによって
使い分けしたいなと、、、、

ソース

以下 index.js ですが、 base.scss を状態やらによって読み込む scss(css) を変えたりできないかなと。

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import './assets/styles/base.scss';
import 'sweetalert/dist/sweetalert.css';
import Main from './pages/Nologin/Main';

import utils from './lib/utils';

utils.renderApp(Main);

if (module.hot) {
  module.hot.accept('./pages/Nologin/Main', () => {
    const NextApp = require('./pages/Nologin/Main').default;
    utils.renderApp(NextApp);
  });
}

registerServiceWorker();

試したこと

とうぜんながら、以下のようなif文はimportできず orz

if (true) {
import './assets/styles/base.scss';
}

補足情報（FW/ツールのバージョンなど）

"react": "^16.8.6",
"react-addons-shallow-compare": "^15.6.0",
"react-async-script-loader": "^0.3.0",
"react-big-calendar": "^0.15.0",
"react-bootstrap": "^0.31.2",
"react-bootstrap-sweetalert": "^4.0.0",
"react-bootstrap-table": "^4.1.0",
"react-chartist": "^0.13.0",
"react-cookie": "^3.1.2",
"react-dates": "^12.6.0",
"react-dev-utils": "^4.0.1",
"react-dom": "^16.8.6",
"react-google-maps": "^7.3.0",
"react-map-gl": "^3.0.4",
"react-moment": "^0.9.2",
"react-notification-system": "^0.2.15",
"react-paypal-express-checkout": "^1.0.5",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"reactjs-popup": "^1.3.2",

Answer 1

返信遅くなり申し訳ないです。

https://github.com/ozluy/react-multiple-entry-and-output-with-webpack-3
こちらのサンプルで、各ページごとにcss指定してあげて対応できました。

ご回答いただきありがとうございました！

Answer 2

webpackを使っていますか？
エントリーを複数にしてわかるのが手っ取り早いと思います。

Comments

[todoroki33]

webpack使っているので、エントリーで調べてみます！ありがとうございます^ ^

[todoroki33]

以下のようなエントリポイントを作成して
```
module.exports = {
entry: {
'user': [
'./src/javascripts/user.js',
],
'admin': [
'./src/javascripts/admin.js',
]
},
```

各ファイルでscssをimportして各個別でcssを読み込ませようと思いましたが、user側、admin側 ともに両方読み込んでしまいました。

user.js
```
import 'assets/styles/user/base.scss';
```
admin.js
```
import 'assets/styles/admin/base.scss';
```

user.js に記載されたpathのページでは、user/base.scss の cssだけを
admin.js に記載されたpathのページでは、admin/base.scss の cssだけを
読み込めれば解決できそうなので、このようなことは難しいでしょうか？

[odyu]

module.exports = {
//...
output: {
filename: '[name].bundle.js'
}
};

こんなのを追加してください。

一度ドキュメント読んでみるのもいいと思います。

https://webpack.js.org/configuration/output/