我正在开发Vue服务器端渲染模板引擎，并且进展顺利，但是我不确定如何解决以下问题。
我需要在Vue组件模板（例如：<style>）之前插入<myComponent>标签，以便渲染引擎事实上包含一种首屏式样式实现。
index.vue
<template>
<div id="app">
<component1></component1>
</div>
</template>
<script>
import component1 from "component1";
export default {
...,
components: {
component1
}
};
</script>
<style>
.red {
color: #f00;
}
</style>
component1.vue
<template>
<div id="component1">
Test
</div>
</template>
<script>
export default {
};
</script>
<style>
.blue {
color: #f00;
}
</style>
已渲染：
<html>
<head>...</head>
<body>
<style>
.red {
color: #f00;
}
</style>
<div id="app">
<h1>Test</h1>
<style>
.blue {
color: #f00;
}
</style>
<div id="component1">Test</div>
</div>
<script>...</script>
</body>
</html>
如何使用webpack和SSR在模板内容之前注入CSS？我可以通过修改vue-loader或其他的设置来做到这一点吗？
我的webpack服务器配置
this.webpackServerConfig = {
mode: "development",
target: "async-node",
output: {
libraryTarget: "commonjs2",
},
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [
"vue-style-loader",
"css-loader",
],
},
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
],
},
plugins: [
new VueLoaderPlugin(),
],
};
基本上，目标是按以下顺序构造呈现的Single-file-component：