VueJS: Imported css file showing as inline instead of external

When i include css,scss files in my entry app file, system adds these css file contents as inline css. But i want them to compiled in one file and import in page automatically like other js files instead of inline css.

Before: page content is like this https://prnt.sc/sj2wde.

After: Something like this

<link rel="stylesheet" href="/assets/css/0.styles.7462b628.css">

// Include scss file
import './assets/index.scss';

export function createApp() {
  const router = createRouter();
  const store = createStore();

  sync(store, router);

  const app = new Vue({
    router,
    store,
    render: (h) => h(App),
  });

  return { app, router, store };
}

I tried to use mini-css-extract-plugin plugin but it works only for standalone vuejs components.

  //webpack module rule
  {
    test: /\.css$/,
    use: [
      isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[local]_[hash:base64:8]',
          },
        },
      },
    ], 
  }