Vue js loader override global css

Question

I want to override the global css with the css defined in vue-loader component.

Currently I have this in 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>

And in my vue component I have a scoped style:

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

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

What I want is that when this component is loaded, it should totally override the global css in index.html. Which is to say that it should behave in such a way that only scoped css should be the one that should apply to the whole body(the css imported in index.html should not at all be used).

Is that possible?

The <style scoped> should have done that? If your main css file classes are also present in <style scoped> It should have overridden? — Amresh Venugopal
– Amresh Venugopal, Commented Feb 28, 2017 at 7:04
It seems to override that. but many other properties defined in global css are present. Its not practical to override everything in scoped css @AmreshVenugopal — rahulserver
– rahulserver, Commented Feb 28, 2017 at 7:05
Oh, so you want only the styles present in scoped to take effect? — Amresh Venugopal
– Amresh Venugopal, Commented Feb 28, 2017 at 7:06
I seem to have a solution, not sure how bad it is. import a css reset file in your component. — Amresh Venugopal
– Amresh Venugopal, Commented Feb 28, 2017 at 7:07

Edmundo Santos · Accepted Answer · 2017-02-28 21:41:10Z

1

No, it's not possible.

You can wrap all global styles in some selector, then refactor your HTML to your component don't be inside it.

.global {
  .someClass {
     ...
  }

  .another {

  }
}

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

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

Or maybe you can try too to create an 'global' component, then inside it import the CSS using Sass @import, and it will be included inline. Then you put the tag as scoped (I'm not sure if this will work for children components inside it). That is:

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

The best solution actually is: if you don't want that the CSS get global, then don't code it as global. Use classes instead generic tag names and attribute selectors.

answered Feb 28, 2017 at 21:41

Edmundo Santos

8,3163 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js loader override global css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related