Подскажите, почему не подгружаются стили и что необходимо сделать?
Совсем простой код. С заглавной странички вызываются либо первая либо вторая страницы. При этом, несмотря на то, что в скомпилированных файлах первой и второй страницы классы присутствуют, по факту они не привязываются к элементам
Код 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}",""])}});