gpt4 book ai didi

javascript - Vue js 加载器覆盖全局 css

转载 作者:行者123 更新时间:2023-11-28 01:00:14 26 4
gpt4 key购买 nike

我想用 vue-loader 组件中定义的 css 覆盖全局 css。

目前我在 index.html 中有这个:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link rel="stylesheet" href="build/styles.css">
</head>
<body id="the-dashboard">
<div id="app">

</div>


//...... Other Code Goes Here ......//
</body>
</html>

在我的 vue 组件中,我有一个作用域样式:

<template>
// ..... Some Code Here ..... //
</template>

<style scoped>
// ... css code here ... //
</style>
<script>
// ... script goes here ... //
</script>

我想要的是当加载这个组件时,它应该完全覆盖 index.html 中的全局 css。也就是说,它应该以这样一种方式运行,即只有范围内的 css 应该适用于整个 body (根本不应该使用在 index.html 中导入的 css)。

这可能吗?

最佳答案

不,这不可能。

您可以将所有全局样式包装在某个选择器中,然后将您的 HTML 重构为您的组件,而不是在其中。

.global {
.someClass {
...
}

.another {

}
}

<div class="global">
<div class="someClass">
...
</div>

<component>
<div class="someClass">
...
</component>

或者您也可以尝试创建一个“全局”组件,然后在其中使用 Sass @import 导入 CSS,它将内联包含在内。然后你把标签放在范围内(我不确定这是否适用于其中的子组件)。即:

<style scoped>
@import 'build/main.css';
</style>

最好的解决方案实际上是:如果您不希望 CSS 变得全局化,那么就不要将其编码为全局的。使用类而不是通用标签名称和属性选择器。

关于javascript - Vue js 加载器覆盖全局 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42502195/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com