erikras / erikras/react-redux-universal-hot-example
How to Add custom theme?
- Dominant language
- JavaScript
- Stars
- 12.1k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
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 (
{head.base.toComponent()}
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
{head.script.toComponent()}
{/* styles (will be present only in production with webpack extract text plugin) */}
{Object.keys(assets.styles).map((style, key) =>
)}
{/* (will be present only in development mode) */}
{/* outputs a 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>
);
}
}
```
Contributor guide
Assessment
This issue has not been assessed yet.