Javascript-форум - При компиляции в webpack с отложенной загрузкой (System.import) не подгружаются стили

Подскажите, почему не подгружаются стили и что необходимо сделать?
Совсем простой код. С заглавной странички вызываются либо первая либо вторая страницы. При этом, несмотря на то, что в скомпилированных файлах первой и второй страницы классы присутствуют, по факту они не привязываются к элементам

Код index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="dist/styles.css">

</head>
<body>
    <div id="app"></div>
    <script src="dist/bundle.js"></script>
</body>
</html>

Код index.js

var style = require('./style/globalStyle.css');

var app = document.getElementById('app');

app.innerHTML = `
    <div id="menu">
        <button id="loadPage1">First page</button>
        <button id="loadPage2">Second page</button>
    </div>
    <div id="content">
        <h1>Main page</h1>
    </div>
`;

document.getElementById('loadPage1').addEventListener('click', () => {
    System.import('./page1')
        .then(pageModule => {
            document.getElementById('content').innerHTML = pageModule.default;
        })
});

document.getElementById('loadPage2').addEventListener('click', () => {
    System.import('./page2')
        .then(pageModule => {
            document.getElementById('content').innerHTML = pageModule.default;
        })
});

if (DEVELOPMENT) {
    if (module.hot){
        module.hot.accept();
    }
}

Код page1.js

var style1 = require('./style/css1.css');

const page = `<div class="red">This is the first page</div>`;
export default page;

Код page2.js

var style2 = require('./style/css2.css');

const page = `<div class="green">This is the second page</div>`;
export default page;

css1

.red{
    background-color: red;
    width: 100%;
    height: 100px;
}

css2

.green{
    background-color: green;
    width: 100%;
    height: 100px;
}

Код webpack.config

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var DEVELOPMENT = process.env.NODE_ENV === 'development';
var PRODUCTION = process.env.NODE_ENV === 'production';

var entry = PRODUCTION
    ? [ './src/index.js']
    : [
        './src/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
];

var plugins = PRODUCTION
    ? [
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('style-[contenthash:10].css'),
        new HtmlWebpackPlugin({
            template: 'index-template.html'
        })
      ]
    : [ new webpack.HotModuleReplacementPlugin() ];

plugins.push(
    new webpack.DefinePlugin({
        DEVELOPMENT: JSON.stringify(DEVELOPMENT),
        PRODUCTION: JSON.stringify(PRODUCTION)
    })
);

const cssIdentifier = PRODUCTION ? '[hash:base64:10]' : '[path]{name]---[local]';

const cssLoader = PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?localIdentName=' + cssIdentifier
        })
    :   ['style-loader', 'css-loader?localIdentName=[path][name]---[local]']


module.exports = {
    devtool: 'source-map',
    entry: entry,
    plugins: plugins,
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel-loader'],
            exclude: '/node_modules/'
        } , {
            test: /\.(png|jpg|gif)$/,
            loaders: ['url-loader?limit=10000&name=images/[hash:12].[exit]'],
            exclude: '/node_modules/'
        } , {
            test: /\.css$/,
            loaders:cssLoader,
            exclude: '/node_modules/'
        }]
    },
    output: {
        path:path.join(__dirname, 'dist'),
        publicPath: PRODUCTION ? '/' : '/dist/',
        filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
    }
};

Содержимое скомпилированных файлов первой (ниже второй) страницы включают css файлы с классами, но вот по факту что-то происходит (или чего-то нужное не происходит) в результате чего элементам первой и второй страниц их стили не присваиваются

Содержимое первой страницы

webpackJsonp([1],{4:function(i,e,n){"use strict";var s=(n(6),'<div class="red">This is the first page</div>');e.default=s},6:function(i,e,n){e=i.exports=n(3)(void 0),e.push([i.i,".red{\n    background-color: red;\n    width: 100%;\n    height: 100px;\n}",""])}});

Содержимое второй страницы

webpackJsonp([0],{5:function(e,n,i){"use strict";var s=(i(7),'<div class="green">This is the second page</div>');n.default=s},7:function(e,n,i){n=e.exports=i(3)(void 0),n.push([e.i,".green{\n    background-color: green;\n    width: 100%;\n    height: 100px;\n}",""])}});