Задать вопрос
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
webpack

Автообновление сборки (webpack) при изменение .scss?

Приветствую!

Написал простую сборку webpack+react. Выполняю npm run start, проверяю автообновление react компонентов, изменяю компонент index.js - страница браузера перезагружается с новыми данными, все отлично. Изменяю index.scss - страница браузера не перезагружается, но при перезагрузки руками - стили обновляются.

Получается, что при изменение стилей, стили автоматически компилируются нормально, но команды браузеру на перезагрузку страницы не уходит...
Как починить?

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,
    },
};

  • Вопрос задан
  • 366 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
pterodaktil
@pterodaktil
js developer
чтоб прям вот как надо)
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]
  }
]);
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик
Wanted. • Санкт-Петербург
До 200 000 ₽
Backend developer / Бэкенд разработчик (E-commerce)
UnyBrands • Москва
от 180 000 до 250 000 ₽
Middle Fullstack Developer 🔥
Fundraise Up
от 3 800 до 5 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Создание нарезок в вертикальном формате на основе стрим
27 дек. 2024, в 21:50
100 руб./за проект
Разобрать большую пачку видеосигналов, снятого анализатором
27 дек. 2024, в 21:48
200000 руб./за проект
Разработать расширение для браузера
27 дек. 2024, в 21:31
7000 руб./за проект
Ещё заказы