Capability with new angular cli 8 and custom webpack config

[WebKieth]

• Operating System: Ubuntu 18.04
• Node Version: 10.15.3
• NPM Version: 6.4.1
• webpack Version: 4.39.1
• mini-css-extract-plugin Version: ^0.8.0

I want to use angular with tailwind css and their @apply custom rule. This rule dont work as expected after installing tailwind for angular. Tailwind requires to add it by custom webpack config with minifying all component styles with tailwind inside one bundle. With my current config this @apply works properly now, but ahead of time compiler says hurtful things....

Expected Behavior

Succeed compiling production build by AOT compiler

Actual Behavior

ERROR in Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'replace' of undefined
when i try to ng build --aot

Code

// webpack.config.js
module.exports = {
...
  plugins: [
    new MiniCssExtractPlugin({
      fileame: "[name].bundle.css"
    }),
  ],
  module: {
    rules: [
      {
        // Extract any SCSS content and minimize
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              ident  : 'postcss',
              syntax: 'postcss-scss',
              plugins: () => [
                require('postcss-import'),
                require('tailwindcss'),
                autoprefixer
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          }
        ]
      },
      {
        // Extract any CSS content and minimize
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader' }
        ]
      }
    ]
  }
}

// customized part of angular.json
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "outputPath": "dist/severwind",
            "index": "src/index.html",
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "severwind:build",
            "aot": false,
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          },
          "configurations": {
            "production": {
              "browserTarget": "severwind:build:production"
            }
          }
        }
      ...
    }

How Do We Reproduce?

Just clone this repo
https://github.com/WebKieth/ngwindy-layout
npm i && ng build --aot

[alexander-akait]

Please open issue in angular-cli, not related to plugin