MiniCssExtractPlugin loader is loading css to two different files

My webpack contains this:

{
   test: /\.css$/i,
   exclude: /node_modules/,
   use: [MiniCssExtractPlugin.loader,"css-loader"]
 }

and I have appLayout.js file that loading css files, that js file is build like this:

import '../../assets/layouts/layout3/css/themes/default.css';
import '../../assets/layouts/layout3/css/layout.css';
import '../../assets/layouts/layout3/css/utils.css';
.
.
.
.
class AppLayout {
   constructor() {
       this.pageLoc = document.getElementById("pageLoc").value;
       this._initContent();
    }
    _initContent = () => {
            switch (this.pageLoc) {
                case  "Page1":
                    import('../../assets/pages/css/pageOne.css');
                    break;

           }
     }
 }

for some reason, the css that is loading is:

"appLayout.443ec43b.css" that contains content of: default.css,layout.css,utils.css and another file called: "src_main_webapp_assets_pages_css_inbox_css.443ec43b.css" that contains content of pageOne.css.

I want to make webpack load all my css, that was imported at the top of file, and that was imported in the middle, to the same file "appLayout.443ec43b.css". found nothing on documentation.