質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

599閲覧

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

todoroki33

総合スコア12

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/05/08 10:33

前提・実現したいこと

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",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

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

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

投稿2019/05/30 08:20

todoroki33

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2019/05/08 16:10

odyu

総合スコア548

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

todoroki33

2019/05/09 01:55

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

2019/05/09 12:15

以下のようなエントリポイントを作成して ``` 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

2019/05/09 22:24

module.exports = { //... output: { filename: '[name].bundle.js' } }; こんなのを追加してください。 一度ドキュメント読んでみるのもいいと思います。 https://webpack.js.org/configuration/output/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問