Как заставить работать HMR для scss|sass если сервер на express?

Для того чтобы заставить работать горячую замену модулей (HMR) для файлов SCSS/Sass при использовании сервера Express, вам понадобится настроить несколько компонентов.

1. Установите необходимые пакеты:

   npm install webpack webpack-dev-middleware webpack-hot-middleware node-sass sass-loader style-loader [email protected] express

2. Создайте файл webpack.config.js в корне вашего проекта с настройками Webpack:

   const path = require('path');
   
   module.exports = {
     mode: 'development',
     entry: ['webpack-hot-middleware/client', './src/index.js'], // точка входа в ваше приложение
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
     },
     module: {
       rules: [
         {
           test: /.(sa|sc|c)ss$/,
           use: [
             'style-loader', // добавляет стили в DOM при изменении
             'css-loader', // переводит CSS в модули JavaScript
             'sass-loader', // компилирует Sass в CSS
           ],
         },
       ],
     },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
     ],
   };

3. Создайте файл server.js в корне вашего проекта с кодом для настройки сервера Express:

   const express = require('express');
   const webpack = require('webpack');
   const webpackDevMiddleware = require('webpack-dev-middleware');
   const webpackHotMiddleware = require('webpack-hot-middleware');
   const config = require('./webpack.config.js');
   
   const app = express();
   const compiler = webpack(config);
   
   app.use(webpackDevMiddleware(compiler, {
     publicPath: config.output.publicPath,
   }));
   
   app.use(webpackHotMiddleware(compiler));
   
   // Добавьте остальные настройки вашего сервера Express
   
   app.listen(3000, () => {
     console.log('Server is listening on port 3000');
   });

4. В вашем файле index.js, который является точкой входа в ваше приложение, импортируйте свой основной стилевой файл SCSS/Sass:

   import './styles/main.scss';
   
   // Ваш остальной код

5. В папке вашего проекта создайте папку styles и файл main.scss. В main.scss вы можете определить свои глобальные стили (например, файлы с переменными, миксины и т.д.):

   @import './variables.scss';
   @import './mixins.scss';
   
   // Остальной код вашего SCSS/Sass

6. Запустите свой сервер Express с помощью команды node server.js, затем откройте ваше приложение в браузере с адресом http://localhost:3000.

Теперь, при каждом изменении SCSS/Sass файлов, ваши стили будут автоматически обновляться без перезагрузки страницы.