javascript - How to Hot Reload Sass Using Webpack 2? -


i'm working on setting react application uses webpack2, webpack-dev-middleware , hmr development. whenever make change on react component, updates in browser intended. issue running when modify .scss files, browser not update. happens instead, in console gives me following:

[hmr] bundle rebuilding client.js:207 [hmr] bundle rebuilt in 1567ms process-update.js:27 [hmr] checking updates on server... process-update.js:98 [hmr] nothing hot updated. process-update.js:107 [hmr] app date.

after this, when refresh page, style changes appear. i'm not entirely sure what's going on or issue stems , clarification.below setup:

webpack.config.js

var webpack = require('webpack'); var path = require('path'); var autoprefixer = require('autoprefixer'); var dashboardplugin = require('webpack-dashboard/plugin'); var extracttextplugin = require('extract-text-webpack-plugin'); var argv = require('yargs').argv;  const config = {};  // configured production if (argv.p) {     config.entry = [       './src/client/scripts/index',       './src/client/scripts/utils/index',       './src/client/styles/index.scss'     ]     config.plugins = [       new dashboardplugin(),       new extracttextplugin({         filename: 'bundle.css',         allchunks: true       }),     ] } else {   config.entry = [     'react-hot-loader/patch',     'webpack-hot-middleware/client',     './src/client/scripts/index',     './src/client/scripts/utils/index',     './src/client/styles/index.scss'   ]   config.plugins = [     new dashboardplugin(),     new webpack.hotmodulereplacementplugin(),     new webpack.noemitonerrorsplugin(),     new webpack.namedmodulesplugin(),     new extracttextplugin({       filename: 'bundle.css',       allchunks: true     })   ] }  module.exports = {   entry: config.entry,   output: {     path: path.join(__dirname, 'src', 'client', 'static'),     filename: 'bundle.js',     publicpath: '/static/'   },   devtool: 'inline-source-map',   devserver: {     hot: true,     contentbase: path.resolve(__dirname, 'src', 'client', 'static'),     publicpath: (__dirname, 'src', 'client', 'static')   },   plugins: config.plugins,   module: {     rules: [       {         test: /\.js?$/,         exclude: /(node_modules|bower_components)/,         include: path.join(__dirname, 'src'),         use: [           {             loader: 'babel-loader',             query: {               presets: ['react', ['es2015', { 'modules': false }], 'stage-0'],               plugins: ['react-hot-loader/babel', 'react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],             }           }         ]       },       {         test: /\.(png|woff|woff2|eot|ttf|svg)$/,         use: [           {             loader: 'url-loader?limit=100000'           }         ],       },       {         test: /\.scss$/,         use: extracttextplugin.extract({           fallback: 'style-loader',           use: ['css-loader', 'sass-loader']         })       }     ]   } };

server.js using webpack-dev-middleware

const router = router(); const clientdir = resolve(`${__dirname}/../../client`);  if (isdev()) {   const webpackdevmiddleware = require('webpack-dev-middleware')   const webpack = require('webpack')   const webpackconfig = require('../../../webpack.config')   const webpackhotmiddleware = require('webpack-hot-middleware')    const compiler = webpack(webpackconfig)    // compiles our app using webpack   router.use(webpackdevmiddleware(compiler, {     publicpath: webpackconfig.output.publicpath,     noinfo: true   }))    // connects our app hmr using middleware   router.use(webpackhotmiddleware(compiler)) }  router.use(express.static(clientdir));  export default router

index.js on client side

import react 'react' import reactdom 'react-dom' import { appcontainer } 'react-hot-loader' import app './app'  const root = document.queryselector('.root');  // wraps our app in appcontainer const render = (component) => {   reactdom.render(     <appcontainer>       <component/>     </appcontainer>,     root   ); };  // renders our application render(app);  // checks if component has been updated // accepts changes , replaced module. // it's checking if js has been changed... // @todo - works js not css. // think issue webpack not // recognizing bundle.css dependency? if (module.hot) {   module.hot.accept(); }

you're using extract-text-webpack-plugin , after webpack rebuilds bundle webpack-dev-middleware thinks nothing changed, because corresponding module in bundle representing css empty content has been extracted.

you need disable extract-text-webpack-plugin in development hmr. can use disable option , fallback style-loader, injects <style> tags.

new extracttextplugin({   filename: 'bundle.css',   allchunks: true,   disable: true })

instead of having define 2 versions of plugin can use environment variables node_env=production , use in plugin:

new extracttextplugin({   filename: 'bundle.css',   allchunks: true,   disable: process.env.node_env !== 'production' })

Comments

Post a Comment

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more