Vue-loader: Duplicate import problem with sass

[sdvcrx]

Hi! Thank you for the amazing vuejs!

I trying to use sass with vue, but I encountered some problems here.

For example, I have a sass file named common.sass which almost every vue files need it, so I import it on *.vue:

// app.vue, other.vue ...
<style lang="sass">
@import "common";
// ....
</style>

Then common.sass will be imported many times, which make the compiled css file very large because it has many duplicate code.

Is there a better way to do it? Thanks again!

[yyx990803]

That's just how it works - in general, you should only put abstract stuff like variables and mixins in shared imports.

Also, if you use the extract css setup for production build, the final CSS will be processed with cssnano which will remove all duplicate rules.

[chenxeed]

Not sure if it'll works for everyone,

we have same problem like this that needs to be solved, the difference is the CSS comes from a plugin library, in this case handsontable.

We have two Vue component that uses this library, and we prefer to have all the component needs (HTML, JS, CSS) are wrapped together in the component.

The problem is that both component basically needs handsontable.css, and we don't want to have this CSS duplicated if we use both component in the same page.

Our workaround is to import the CSS with separated <style> tag, instead of import it.

Below are the example:

(Duplicated)

<style lang="scss">
@import `~handsontable.css`;

// our component stylesheets
</style>

(Not duplicated!)

<style src="handsontable.css" />
<style lang="scss">
// our component stylesheets
</style>

[eomis]

@yyx990803

Sorry for disturb. But in this case, if add scoped attribute to style tag, all the imported scss gets scoped as well which leads to massive code duplication for my extracted css.

And I found someone has the same trouble as me:
duplicate global style with scoped