Is ExtractTextPlugin required to load CSS files ?

ayouboudelaa

Hi, It seems that dropping ExtractTextPlugin in development, to have benefit of HMR for styles, prevent styles from being loaded in the HTML ? Any solution for that ? Using just the loaders is not enough unfortunately.

SKalt

I've got HMR for css working without ExtractTextPlugin with the following setup: ``` // from package.json "devDependencies: { "webpack": "^3.11.0", "webpack-manifest-plugin": "^1.3.2", "webpack-dev-server": "^2.11.2", "css-loader": "^0.28.10", "style-loader": "^0.20.3" } ``` ``` // from webpack.config.js // see https://webpack.js.org/loaders/#styling const path = require('path'); const {spawn} = require('child_process'); module.exports = { ... devServer: { before() { // prep the manifest file with the correct publicPath and asset locations // if your dev config differs from your prod output setup. }, after() { const flask = spawn( 'python', [path.resolve(__dirname, 'path/to/app.py')], { // env: {FLASK_DEBUG: 1} caused a 'no module named flask' error } ); // watch flask's logging flask.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); flask.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); flask.on('close', (code) => { console.log(`child process exited with code ${code}`); }); }, clientLogLevel: 'warning', hot: true, contentBase: path.resolve(__dirname, '.'), compress: true, host: 'localhost', inline: true, port: 5001, open: false, overlay: {warnings: false, errors: true}, watchOptions: { poll: true, }, allowedHosts: [ 'localhost', '.your-test-domain.com' ] }, rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } ``` And HMR activated on the CLI via `npx webpack-dev-server`.

ayouboudelaa

Thanks, I'll try this soon and see.

SKalt

@ayouboudelaa, an update: I've got the full config visible at https://github.com/SKalt/flask_webpack_3_demo.

ayouboudelaa

@SKalt Thanks for the come back. So if I get it right, I only need to drop ExtractTextPlugin from the loader and it should work ? I'm pretty sure I tried that and it didn't !, well maybe I missed something, I'll try it again.

nickjj

Hi, Sorry for the long delay. This project is about to get archived and will no longer be supported. A new project is taking its place at: https://github.com/nickjj/flask-static-digest This new project is much easier to use, and will not only work with Webpack but it will work with any (or no) asset build tools. It's completely standalone and much easier to use / configure.