Auto-update assembly (webpack) when changing .scss?

M

Michael R.2019-08-15 11:54:16

JavaScript

Michael R., 2019-08-15 11:54:16

Greetings!
Wrote a simple webpack+react assembly. I execute npm run start, check the auto-update of react components, change the index.js component - the browser page reloads with new data, everything is fine. I change index.scss - the browser page does not reload, but when reloading by hand - the styles are updated.
It turns out that when changing styles, the styles are automatically compiled normally, but the browser command to reload the page does not go away ...
How to fix it?

root/src/index.scss

body {
    background-color: gray;
}

root/src/index.html

<!DOCTYPE html>
<html lang="ru">
    <body>
        <div id="root"></div>
    </body>
</html>

root/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./css/index.scss";

const App = () => ({
    render() {
        return (
            <div>
                <h1>My React App!</h1>
            </div>
        );
    },
});

ReactDOM.render(<App />, document.getElementById("root"));

root/package.json

{
    "name": "webpack_test",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "author": "",
    "license": "ISC",
    "scripts": {
        "start": "webpack-dev-server --mode development",
        "dev": "webpack --mode development",
        "dist": "webpack --mode production"
    },
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-redux": "^7.1.0",
        "react-router-dom": "^5.0.1",
        "redux": "^4.0.1"
    },
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.2.0",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.8.0",
        "node-sass": "^4.12.0",
        "postcss-loader": "^3.0.0",
        "prettier": "^1.18.2",
        "redux-devtools": "^3.5.0",
        "sass-loader": "^7.2.0",
        "style-loader": "^1.0.0",
        "webpack": "^4.39.2",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.8.0"
    }
}

root/webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const pathSrc = path.join(__dirname, "./src");
const pathDist = path.join(__dirname, "./dist");

module.exports = {
    entry: {
        main: `${pathSrc}/index.js`,
    },

    output: {
        filename: "bundle.js",
        path: pathDist,
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },

            {
                test: /\.(sa|sc|c)ss$/,
                use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"],
            },
        ],
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "bundle.css",
        }),

        new HtmlWebpackPlugin({
            template: `${pathSrc}/index.html`,
        }),
    ],

    devServer: {
        contentBase: pathSrc,
        port: 9000,
        open: true,
        hot: true,
        inline: true,
    },
};

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

Petr Muhurov, 2019-08-15
@Mike_Ro

so that's how it should be)

const env = process.env;
const __DEV__ = env.NODE_ENV === "development";

const BASE_CSS_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    sourceMap: true,
    minimize: true
  }
};
const CSS_MODULES_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    localIdentName: "[name]__[local]___[hash:base64:5]",
    modules: true,
    sourceMap: true,
    minimize: true
  }
};
const POSTCSS_LOADER = {
  loader: "postcss-loader",
  options: {
    sourceMap: true,
    plugins: [autoprefixer],
    minimize: true
  }
};
const STYLE_LOADER = __DEV__ ? "style-loader" : MiniCssExtractPlugin.loader;
config.module.rules = [].concat(config.module.rules, [
  {
    test: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      CSS_MODULES_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.module\.css$/,
    use: [STYLE_LOADER, CSS_MODULES_LOADER, POSTCSS_LOADER]
  },
  {
    test: /\.scss$/,
    exclude: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.less$/,
    exclude: /\.module\.less$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "less-loader?sourceMap"
    ]
  },
  {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: [STYLE_LOADER, BASE_CSS_LOADER, POSTCSS_LOADER]
  }
]);