How to Add custom theme?
Author: al-aniCreated Sep 24, 2016Updated Jun 20, 2019
I am a totally new to webpack and react, anyway, I am trying to add theme AdminLTE https://github.com/almasaeed2010/AdminLTE So I added the CSS and javascript files to /src/helpers/Html.js , but it is not working :( Any idea how to add external theme :) or how can I add the CSS and js files to the template
-Html.js file
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom/server';
import serialize from 'serialize-javascript';
import Helmet from 'react-helmet';
export default class Html extends Component {
static propTypes = {
assets: PropTypes.object,
component: PropTypes.node,
store: PropTypes.object
};
render() {
const {assets, component, store} = this.props;
const content = component ? ReactDOM.renderToString(component) : '';
const head = Helmet.rewind();
return (
<html lang="en-us">
<head>
{head.base.toComponent()}
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
{head.script.toComponent()}
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* styles (will be present only in production with webpack extract text plugin) */}
{Object.keys(assets.styles).map((style, key) =>
<link href={assets.styles[style]} key={key} media="screen, projection"
rel="stylesheet" type="text/css" charSet="UTF-8"/>
)}
{/* (will be present only in development mode) */}
{/* outputs a <style/> tag with all bootstrap styles + App.scss + it could be CurrentPage.scss. */}
{/* can smoothen the initial style flash (flicker) on page load in development mode. */}
{/* ideally one could also include here the style for the current page (Home.scss, About.scss, etc) */}
{ Object.keys(assets.styles).length === 0 ? <style dangerouslySetInnerHTML={{__html: require('../theme/bootstrap.config.js') + require('../containers/App/App.scss')._style}}/> : null }
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<link rel="stylesheet" href="./assets/dist/css/AdminLTE.min.css"/>
<link rel="stylesheet" href="./assets/dist/css/skins/_all-skins.min.css"/>
<link rel="stylesheet" href="./assets/plugins/iCheck/flat/blue.css"/>
<link rel="stylesheet" href="./assets/plugins/morris/morris.css"/>
<link rel="stylesheet" href="./assets/plugins/jvectormap/jquery-jvectormap-1.2.2.css"/>
<link rel="stylesheet" href="./assets/plugins/datepicker/datepicker3.css"/>
<link rel="stylesheet" href="./assets/plugins/daterangepicker/daterangepicker-bs3.css"/>
<link rel="stylesheet" href="./assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"/>
<link rel="stylesheet" href="./assets/dist/fonts/fonts-fa.css"/>
<link rel="stylesheet" href="./assets/dist/css/bootstrap-rtl.min.css"/>
</head>
<body>
<div id="content" dangerouslySetInnerHTML={{__html: content}}/>
<script src="./assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="./assets/plugins/morris/morris.min.js"></script>
<script src="./assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="./assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="./assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="./assets/plugins/knob/jquery.knob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="./assets/plugins/daterangepicker/daterangepicker.js"></script>
<script src="./assets/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="./assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="./assets/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./assets/plugins/fastclick/fastclick.min.js"></script>
<script src="./assets/dist/js/app.min.js"></script>
<script src="./assets/dist/js/pages/dashboard.js"></script>
<script src="./assets/dist/js/demo.js"></script>
<script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet="UTF-8"/>
<script src={assets.javascript.main} charSet="UTF-8"/>
</body>
</html>
);
}
}Source: erikras/react-redux-universal-hot-example