1

I'm using meteor with webpack, react and react-router.

I have an webpack entry point (specific to meteor):

"browser": "client/main.jsx"

In the main.jsx, I import my router (again meteor's logic):

import { renderRoutes } from '../imports/startup/client/routes.jsx';

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('app'));
});

In the routes.jsx, I import all the components:

...
import Landing from '../../../imports/ui/pages/landing-content/landing/Landing.jsx';
import Signin from '../../../imports/ui/pages/landing-content/signin/Signin.jsx';
import Signout from '../../../imports/ui/pages/landing-content/signout/Signout.jsx';
...

export const renderRoutes = () => (
  <Router history={browserHistory}>
    <Route path="/" component={LandingContainer} onEnter={ requireNotAuth }>
      <IndexRoute component={Landing}/>
      <Route path="signin" component={Signin}/>
      <Route path="signout" component={Signout}/>
      <Route path="*" component={Landing}/>
    </Route>
  </Router>
);

My problem is that webpack, using the react-router, imports all the components, and so, all the components styles. It is not importing the specific style for each route (signout style in /signout and signin style in /signin).

How can I solve that ?

NB: I think that my problem is not specific to meteor.

Thanks.

Julien Malige
  • 3,295
  • 1
  • 20
  • 39

0 Answers0