[WEBPACK] Formation de Grafikart

Bonjour,

Voila je rencontre un petit problème avec mon code. Je suis en train de suivre la formation de Grafikart mais je suis face à une erreur et je ne trouve pas ce que je fais de mal. Je suis au niveau de la partie mise en cache / Url Loader.
Lorsque je lance un npm run dev, j'obtiens une erreur au niveau de la compilation du scss. Mon erreur est:

ERROR in ./assets/css/app.scss
Module parse failed: Unexpected character '#' (1:13)
You may need an appropriate loader to handle this file type.
| $background: #DDD;
|
| body{
 @ multi ./assets/css/app.scss ./assets/js/app.js

J'ai donc commencé par analyser mon fichier scss, mais je ne trouve pas l'erreur.

/* fichier scss */
$background: #DDD;

body{
    background: $background url('./img/image.jpg');
    transform: translateX(20px);
}

D'après l'erreur, j'aurais un soucis au niveau du loader. Cependant, malgré un visionnage intempestif de la vidéo, je ne trouve pas ce que je fais de mal.
Mon fichier webpack.config.js

const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const CleanWebPlugin = require('clean-webpack-plugin')

const dev = process.env.NODE_ENV === "dev"

let cssLoaders = [
    {
        loader: 'css-loader',
        options:
        {
            importLoaders: 1,
            minimize: !dev
        }
    }
]

if (!dev) {
    cssLoaders.push({
        loader: 'postcss-loader',
        options:
        {
            plugins: (loader) => [
                require('autoprefixer')({
                    browsers: ['last 2 versions', 'ie > 8']
                }),
            ]
        }
    })
}

let config = {
    watch: dev,
    entry: {
        app: ['./assets/css/app.scss', './assets/js/app.js']
    },
    output: {
        path: path.resolve("./dist"),
        filename: dev ? '[name].js' : '[name].[chunkhash:8].js',
        publicPath: "/dist/"
    },
    devtool: dev ? "cheap-module-eval-source-map" : false,
    module: {
        rules:[
            {
                test:/\.js$/,
                exclude: /(node-modules|brower_components)/,
                use:['babel-loader']
            }
        ],
        rules:[
            {
                test:/\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: cssLoaders
                })
            }
        ],
        rules: [
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'file-loader'
            }
        ],
        rules:[
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [...cssLoaders, 'sass-loader']
                })
            }
        ],
        rules:[
            {
                test:/\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: dev ? '[name].css' : '[name].[contenthash:8].css',
            disable: dev
        }),
    ]
}
if (!dev) {
    config.plugins.push(new UglifyJSPlugin({
        sourceMap: false
    }))
    config.plugins.push(
        new ManifestPlugin()
    )
    config.plugins.push(
        new CleanWebPlugin(['dist'], {
            root: path.resolve('./'),
            verbose:true,
            dry: false
        })
    )
}

module.exports = config

et mon fichier package.json

{
  "name": "webpack_apprentissage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=dev webpack",
    "prod": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.9",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-manifest-plugin": "^1.3.2"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  }
}

J'ai même tenté de laisser un simple point d'entrée et utiliser le "import css from './css/app.scss', j'obtiens toujours la même erreur.

Je ne comprend pas d'où vient l'erreur. La voyez vous?

Merci d'avance.