我想用 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/