I
I
Igor Myasnikov2017-09-05 21:20:42
webpack
Igor Myasnikov, 2017-09-05 21:20:42

Why is there no reload after changing sass in webpack?

Good day.
Changing style.sass does not automatically reload the page.
If you start it again, everything works without errors

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  entry  : {
    app: './src/index.js',
    another: './src/anotherMOdule.js'
  },
  output : {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path    : path.resolve (__dirname, 'dist')
  },
 	plugins: [
 		new CleanWebpackPlugin (['dist/*.*']),
 		new HtmlWebpackPlugin ({
 			title: 'Output Management'
 		}),
       new webpack.optimize.CommonsChunkPlugin({
         name: 'common' // Specify the common bundle's name.
     }),
 		new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin("styles.css"),
    // new BundleAnalyzerPlugin()
 	],
  module : {
    rules: [
      {
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: ['css-loader', 'sass-loader']
            })
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use : [
          'file-loader'
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use : [
          'file-loader'<code lang="javascript">
        ]
      }
    ]
  }
};
Использую dev-server: 
"start": "webpack-dev-server --open --config webpack.dev.js"

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim, 2017-09-05
@maxfarseer

1) why do you need extractTextPlugin in develop mode? If there is no need, then replace it with scss and style loaders, like this:

{
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
        include: path.join(__dirname, 'src'), // ваша директория тут
      },

2) add --hot to server start:
webpack-dev-server --open --hot --config webpack.dev.js

3) if you still need extracted - read this topic (many solutions).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question