How to customize HMR styles in webpack 3?

Question

css

Actually there is such a config

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack')
const path = require('path');

module.exports = {
    entry: {
        main: [
            './src/app.js',
            './src/styles/styles.scss'
        ]
    },


    output: {
        filename: './public/[name].js'
    },

    
    devtool: "cheap-inline-module-source-map",

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'sass-loader',
                    'css-loader'
                ]
            },
        ]
    },


    watchOptions: {
        aggregateTimeout: 300
    },

    devServer: {
        host: 'localhost',
        port: 9000,
        inline: true,
        hot: true,
        open: true
    },

    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            disable: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
};

But when I run the webpack-dev-server command, I get an error

ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader!./src/styles/styles.scss
Module build failed:
.block {
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
      in C:\Users\titan\projects\VsCode\calendar\src\styles\styles.scss (line 1, column 1)
 @ ./src/styles/styles.scss 4:14-124 18:2-22:4 19:20-130
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/app.js ./src/styles/styles.scss

What am I doing wrong and how can I fix it?

Answer 1

{
  test: /\.scss$/,
    use: [
        'style-loader',
        'sass-loader', // поменять местами с css-loader
        'css-loader' // поменять местами с sass-loader
    ]
},

In simple words, this is how: first, the scss code goes through the sass-loader, then this code goes through the css-loader, and then all this is pushed into the style through the style-loader. Order from bottom to top.