vue.js - VueJS：导入的 css 文件显示为内联而不是外部

Question

当我在我的入口应用程序文件中包含 css、scss 文件时，系统会将这些 css 文件内容添加为内联 css。但我希望它们编译在一个文件中并像其他 js 文件而不是内联 css 一样自动导入页面。

之前：页面内容是这样的https://prnt.sc/sj2wde。

之后：像这样的东西

<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 };
}

我尝试使用mini-css-extract-plugin插件，但它仅适用于独立的 vuejs 组件。

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

标签： vue.jswebpackvuejs2server-side-renderingmini-css-extract-plugin