2

我想用 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 应该是应该应用于整个主体的 css（根本不应该使用在 index.html 中导入的 css）。

那可能吗？

4

1 回答 1

1

不，这是不可能的。

您可以将所有全局样式包装在某个选择器中，然后将您的 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 变得全局，那么不要将其编码为全局。使用类而不是通用标签名称和属性选择器。

于 2017-02-28T21:41:10.707 回答