Not extracting/emitting CSS from vendor chunk

🐞 Bug report

💻 Version of CKEditor

"@ckeditor/ckeditor5-build-classic": "^12.4.0", "@ckeditor/ckeditor5-vue": "^1.0.0",

📋 Steps to reproduce

Setup webpack config as docs suggest.
Run webpack

✅ Expected result

Emitted main.js/runtime.js/vendors.js/ckstyles.css

❎ Actual result

Emitted main.js/runtime.js/vendors.js

📃 Other details that might be useful

Sorry to open another issue about this. I am simply attempting to extract the theme css from vendors.js (your docs are missing importing const { styles } = require('@ckeditor/ckeditor5-dev-utils'); as a requirement or any reference to it) but I am not getting any emitted css. The Ck-editor styles are still being served as part of my vendors chunk.

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html

// webpack.config.js
const path = require('path');
const Config = require('./config/config');
const utils = require('./utils.js');
const output_path = path.join(__dirname, Config.build.dist, Config.assets);
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/js/index.js',
  output: {
    path: path.join(output_path, 'js'),
    filename: '[name].js',
    publicPath: output_path,
  },
  resolve: {
    modules: [utils.resolve('node_modules')],
    alias: {
      '@app': utils.resolve('src/js/app')
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new LodashModuleReplacementPlugin,
    new MiniCssExtractPlugin({
      filename: 'ckstyles.css'
    })
  ],
  module: {
    rules: [
      // HTML loader
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      },
      // JSON loader
      {
        type: 'javascript/auto',
        test: /\.json$/,
        exclude: /(node_modules)/,
        include: utils.resolve('src/js/app/data'),
        use: {
          loader: 'file-loader',
          options: {
            emitFile: false
          }
        }
      },
      {
        test: /\.svg$/,
        use: ['raw-loader']
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: styles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-build-classic')
              },
              minify: true
            })
          },
        ],
      },
      // ES Lint
      {
        test: /\.js$/, // include .js files
        enforce: 'pre', // preload the jshint loader
        loader: 'eslint-loader',
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          plugins: ['lodash'],
          presets: [['env', { modules: false }]]
        }
      },
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    runtimeChunk: 'runtime',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          enforce: true,
          chunks: 'all'
        },
        // styles: {
        //   name: 'styles',
        //   test: /\.css$/,
        //   chunks: 'all',
        //   enforce: true,
        // }
      }
    }
  }
}

// package.json
    "devDependencies": {
    "@ckeditor/ckeditor5-dev-utils": "^12.0.5",
    "autoprefixer-core": "^6.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-lodash": "^3.3.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^3.0.0",
    "connect-livereload": "^0.6.1",
    "css-loader": "^3.2.0",
    "eslint": "5.15.3",
    "eslint-friendly-formatter": "4.0.1",
    "eslint-loader": "2.1.2",
    "express": "^4.17.1",
    "findup-sync": "^4.0.0",
    "grunt": "^1.0.4",
    "grunt-bump": "^0.8.0",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-jshint": "^2.1.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-express-server": "^0.5.4",
    "grunt-jsbeautifier": "^0.2.13",
    "grunt-modernizr": "^2.0.1",
    "grunt-open": "^0.2.4",
    "grunt-postcss": "^0.9.0",
    "grunt-processhtml": "^0.4.2",
    "grunt-remove-logging": "^0.2.0",
    "grunt-sass": "^3.1.0",
    "grunt-shell": "^3.0.1",
    "grunt-ssh": "^0.12.9",
    "grunt-svgmin": "^6.0.0",
    "grunt-webpack": "^3.1.3",
    "html-loader": "^0.5.5",
    "jpegtran-bin": "4.0.0",
    "jshint-stylish": "^2.2.1",
    "load-grunt-configs": "^1.0.0",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.5",
    "matchdep": "^2.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "modernizr": "^3.7.1",
    "node-bourbon": "^4.2.8",
    "normalize.css": "^8.0.1",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.1.0",
    "style-loader": "^1.0.0",
    "svg-inline-loader": "^0.8.0",
    "terser-webpack-plugin": "^2.1.2",
    "webpack": "^4.41.0",
    "webpack-stream": "^5.2.1"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
    "@ckeditor/ckeditor5-vue": "^1.0.0",
    "axios": "^0.19.0",
    "cash-dom": "^4.1.5",
    "element-ui": "^2.12.0",
    "file-loader": "^4.2.0",
    "google-maps-promise": "^2.1.0",
    "hoverintent": "^2.2.1",
    "moment": "^2.24.0",
    "object-fit-images": "^3.2.4",
    "perfect-scrollbar": "^1.4.0",
    "query-string": "^6.8.3",
    "smoothscroll-polyfill": "^0.4.4",
    "sticky-js": "^1.2.0",
    "text": "^0.1.0",
    "vue": "^2.6.10",
    "vue-async-computed": "^3.7.0",
    "vue-carousel": "^0.18.0",
    "vue-easy-tinymce": "^1.0.2",
    "vue-perfect-scrollbar": "^0.2.0",
    "vue-slider-component": "^3.0.41",
    "vuex": "^3.1.1",
    "when": "^3.7.8"
  }

ckeditor / ckeditor5