Question

我想用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。也就是说，它应该以这样一种方式运行，即只有作用域应该适用于整个身体（在index.html中导入的css根本不应该使用）。

这可能吗？

Answer 1

不，这是不可能的。

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

Vue js loader覆盖全局css

1 个答案: