Как остановить FUC при использовании CSS, загруженного WebPack ⇐ CSS

[Anonymous]

Я получаю FOUC при загрузке CSS внутри моей точки входа при использовании WebPack . Если я удалю свой CSS из загрузки WebPack < /code>> и просто включаю его в свой HTML -файл в качестве нормальной ссылки, то проблема с FOUC уходит. Ниже приведен только тестовый пример моей проблемы с использованием начальной загрузки. < /p>
html -код < /p>




Title





Navbar example






< /code>
bootstrap.js Основная точка входа < /p>
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'

$(document).ready(function () {
console.log('bootstrap loaded')
});
< /code>
webpack.config.js
var path = require('path');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const webpack = require("webpack");

module.exports = {
entry: './src/bootstrap.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': 'jquery'
})
],
devtool: 'inline-source-map',
module: {
resolve: {
modulesDirectories: ['node_modules']
},
loaders: [
{
test: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{ test: /\.css?$/, loader: 'style!css'},
{ test: /\.html$/, loader: 'html' },
{ test: /\.(png|gif|jpg)$/, loader: 'url', query: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff' } },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
]
}
};


Подробнее здесь: https://stackoverflow.com/questions/364 ... by-webpack