Why doesn't Webpack see the loaders from the config?

Question

JavaScript

Guys, save, the second day I'm fighting over, apparently, some kind of stupid mistake. Webpack 5 does not want to load css and scss files via import. Here are the configs:

webpack:

const path = require('path')

const mode = process.env.NODE_ENV

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  mode: mode == 'production' ? 'production' : 'development',
}

if(mode == 'development') {
  config.devtools = 'eval-source-map'
}

module.export = config

package.json

{
  "name": "svetamiru",
  "version": "1.0.0",
  "description": "Тема для wordpress",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "export NODE_ENV=production; webpack",
    "dev": "export NODE_ENV=development; webpack --watch"
  },
  "dependencies": {
    "@fancyapps/ui": "^4.0.0-alpha.2",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "util": "^0.12.4"
  },
  "devDependencies": {
    "css-loader": "^5.2.6",
    "sass-loader": "^12.1.0",
    "sass": "^1.35.1",
    "style-loader": "^3.0.0",
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  }
}

And the project structure:


Styles are included in index.js like this:

import "../../styles/reset.css"
import "../../styles/style.scss"
import "@fancyapps/ui/dist/fancybox.css"

In this case, in three cases, webpack writes the same error, for each of the css and scss files:

ERROR in ../styles/style.scss 13:0
Module parse failed: Unexpected character '@' (13:0)
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

And if I include loaders inside import'a like this can be done in webpack 5, then it works and there is no error:

import "!style-loader!css-loader?modules!../../styles/reset.css"
import "!style-loader!css-loader?modules!sass-loader!../../styles/style.scss"
import "[email protected]/ui/dist/fancybox.css"

It looks like the loaders from the config just don't work... any ideas?

Answer 1

module.export = config
Laugh or not, this is all due to my inexperience in node.js...
It should be like this:
module.exports = config
Apparently he just didn't see the config.