即使没有显示，也会加载IndexRoute样式

Question

我正在使用react-router 2.4.0和React 15.2.1以及Webpack。我看到样式是通过IndexRoute组件（在本例中为Main）加载的，尽管它没有被加载。

考虑以下来源：

AppRouter.js

<Router history={history}>
    <Route path='/' component={App}>
        <IndexRoute component={Main} onEnter={requireLogin} />
        <Route path='login' component={LoginPage} />
    </Route>
</Router>

function requireLogin(nextState, replace) {
    if (!getIsUserLoggedIn()) {
        replace('/login');
    }
}

Main.js

...

import '../styles/Main.scss';

...

webpack.config.js：

...

module: {
    loaders: [
        {
            test: /\.scss$/,
            loader: 'style!css!sass!postcss-loader'
        }
    ]
},
postcss: [autoprefixer({ browsers: ['last 2 versions'] })]

导航到/并且用户已注销时，路由器会重定向到/login，但Main.scss中加载的所有样式都会附加到DOM。

如何防止这种情况发生，并仅加载LoginPage组件样式？