How to Add custom theme?

al-ani commented 8 years ago

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>
         );
       }
     }

VSuryaBhargava commented 8 years ago

I include additional libraries in the webpack config entry main for development and production. ( I use this for js, haven't tried it with css)

entry: { 'main': [ 'bootstrap-loader/extractStyles', 'font-awesome-webpack!./src/theme/font-awesome.config.prod.js', './src/client.js', './src/lib/xyz/xyz.js' ] },

or

I create a new folder src/lib

I put all the libraries used in this folder and exclude the folder for jsx loader in webpack config module loaders jsx (for development and production).

{ test: /.jsx?$/, exclude: /(node_modules)|(src\/lib)/, loaders: [strip.loader('debug'), 'babel']},

Then I simply include the js and css files in client.js ( I use this method for 3rd party css too).

import './lib/lib.js'; import 'lib/lib.css';

or you can require where you want to use it

const thisLib = require('../../lib/thisLib/thisLib.js'); thisLib.doStuff();

By doing this you have to make sure you use the relevant javascript in client only not server. Most libraries need a dom element etc which won't be accessible in server. I normally initiate the library in componentDidMount and use them on client side events.

S-morteza-S-oskooei commented 5 years ago

you can import your scss or css to 'src/theme/bootstrap.overrides.scss' like this @import 'style.css'; all of them will add to your project.

erikras / react-redux-universal-hot-example

How to Add custom theme? #1291