Моя цель:
Я разрабатываю движок шаблонов рендеринга Vue Serverside, и у меня все хорошо, но я не уверен, как решить следующую проблему.
Мне нужно ввести <style> тегов перед шаблоном компонента Vue (например: <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>
Мой вопрос:
Как внедрить CSS перед содержимым шаблона с помощью веб-пакета и моего SSR?Могу ли я сделать это, изменив настройки vue-loader или что-то еще?
Примечания:
Конфигурация моего сервера веб-пакетов
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 в следующем порядке:
- Стиль
- Шаблон (уже работает)
- Скрипт (уже работает)