Can't build application with sass files, which are working on development

[jaqua]

I can run my nextJS application in development mode without any errors.
I'm using SASS files for styling.
But if I try to build the productive application running next build I'm running into problems:

Module not found: Error: Can't resolve 'styles/article.sass' ...
(...) // Huge errors, which are all connected to sass files.

So I think I have to create somehow a (minified) css file from all used sass files.

This is my setup, so what is missing here?

.babelrc

{
  "env": {
    "development": {
      "presets": "next/babel",
      "plugins": [
        [
          "module-resolver", {
            "root": ["."],
            "alias": {
              "styles": "./styles"
            },
            "cwd": "babelrc"
        }],
        [
          "wrap-in-js",
          {
            "extensions": ["css$", "scss$", "sass$"]
          }
        ]
      ]
    }
  }
}

next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|s(a|c)ss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      },
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }
}