我想用 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 才应该应用于整个主体（index.html 中导入的 css 根本不应该被使用）。
那可能吗？
不，这是不可能的。
您可以将所有全局样式包装在某个选择器中，然后将您的 HTML 重构为不在其中的组件。
.global {
.someClass {
...
}
.another {
}
}
<div class="global">
<div class="someClass">
...
</div>
<component>
<div class="someClass">
...
</component>
或者也许您也可以尝试创建一个“全局”组件，然后在其中使用 Sass 导入 CSS@import，并且它将被内联包含。然后将标签设置为作用域（我不确定这是否适用于其中的子组件）。那是：
<style scoped>
@import 'build/main.css';
</style>
实际上最好的解决方案是：如果您不希望 CSS 变得全局，那么就不要将其编码为全局。使用类而不是通用标签名称和属性选择器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
