Can I avoid duplicate styles with Vue.js components?

Question

I'm new to Vue (and the concept of single file components) and not sure how the CSS is compiled when my app is generated.

I have a pattern library where all the SCSS is compiled for my project so I want to pull this into my components. I know I can load in the mixins and variables globally, then I intend on handpicking other blocks of sass if they need to be used to style that component.

What I'm worried about is:

if I keep using the same style definitions in multiple components, will these be duplicated in the compiled css?

If so. how can that be avoided? Eg: I import the 'headings.scss' in 10 components. Will there be 10 instances of that 'headings.scss' file in the compiled CSS?

I hope that makes sense! Just need some more clarity here.

Colincolinson

Answer 1

Yup there will be duplication. But if you are using vuejs webpack template the production build's css is processed by cssnano which will discard duplicated css

note; only exact duplicates will be discarded.

Manteau

Ah that's good to know! If I'm mostly importing .scss then they will be exact duplicates so it seems cssnano is the key. Thanks. – Colincolinson

Yes, cssnano removes duplicates when you build your app for Production (npm run build).However, in development mode you still see duplicates. – Medrano