Question

我正在将Vue集成到网站中，但是，当我使用组件时，它的样式仅在结束</body>标签之前添加，这是不理想的，因为我需要在这些标签下面添加样式以覆盖颜色等，这当然是每个客户的。

是否可以将id添加到客户样式中，并在上面附加我的组件样式？

因此我的文档需要如下所示：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Vue Styles -->
    <style type="text/css">

    </style>
    <!-- END Vue Styles -->

    <!-- Client Styles -->
    <style type="text/css">

    </style>
    <!-- END Client Styles -->

</head>
<body>

</body>
</html>

Answer 1

我认为您无法订购包含样式的方式。但是您可以做几件事。

如果您通过<h1>Scalable content using flex, example 1, issue with shrinking the DOM</h1> <div class="grid-holder"> <div class="conversation-container"> <div class="phone-control-container"> <empty> <div class="double-container"> <div class="conversation-holder"> <p>X</p> <span class="name">Namefrom Someone</span> <span class="number">555666444213321</span> <p>X</p> </div> <p>X</p> <div class="conversation-holder"> <span class="name">Namefromasdasd eone</span> <span class="number">555666444123123</span> </div> </div> </empty> </div> <div class="impersonation-container"> <empy> <span>something</span> <span>button</span> <span>button</span> </empy> </div> </div> </div> <h1>Scalable content using flex, example 2, fixed DOM shrinking issue but using hard coded values in the width</h1> <div class="grid-holder1"> <div class="conversation-container"> <div class="phone-control-container"> <empty> <div class="double-container"> <div class="conversation-holder"> <p>X</p> <span class="name">Namefrom Someone</span> <span class="number">555666444213321</span> <p>X</p> </div> <p>X</p> <div class="conversation-holder"> <span class="name">Namefromasdasd eone</span> <span class="number">555666444123123</span> </div> </div> </empty> </div> <div class="impersonation-container"> <empy> <span>something</span> <span>button</span> <span>button</span> </empy> </div> </div> </div>中的import添加样式，则会先添加样式。
您可以将App.js用于CSS定义。仅当初始定义尚未设置!important时，Ofc才起作用。

Answer 2

我还没有尝试过，但是似乎CSS Extraction provided by the vue-loader Webpack加载器允许将CSS提取到外部包中。有了它之后，就可以将其包含在网页上的任何位置。

Answer 3

我不知道您的应用程序结构，但是在Vue中，您可以为相应组件中的每个组件添加样式。

TestComponent.vue

<template src='./Test.html'>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

Vue App，需要在其他样式之上添加样式

3 个答案: