Can you help with setting up webpack?

Question

Sass

Good day.

According to one of the courses, I set up webpack and at one point there is a plug. I can't figure out what the problem is, please help.

Here is the webpack.config.js itself

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: './index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@core': path.resolve(__dirname, 'src/core')
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: 'index.html'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/favicon.ico'),
                    to: path.resolve(__dirname, 'dist')
                }
            ]
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.s[as]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

Here is the index.scss that allegedly webpack swears at

$red: blue;

body {
  background: $red;
}

Here is the index.js where I import the scss file

import './module'
import './scss/index.scss'

console.log('Working!')

Just in case, here is the package.json

{
  "name": "excel-course",
  "version": "1.0.0",
  "description": "Pure Javascript Excel Application",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/romantonkoshkurov93/excel-course.git"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "author": "Roman Tonkoshkurov <[email protected]>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/romantonkoshkurov93/excel-course/issues"
  },
  "homepage": "https://github.com/romantonkoshkurov93/excel-course#readme",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }
}

and here at the start of
npm run start
webpack swears. Below is the error.

ERROR in ./scss/index.scss 3:5
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| $red: blue;
|
> body {
|   background: $red;
| }
 @ ./index.js 2:0-27

webpack 5.11.1 compiled with 1 error in 819 ms

Answer 1

This regex will never work for you on scss test: /\.s[as]ss$/i