SASS loader duplicates CSS styles styles

[Timmmm]

Version

4.1.0

Reproduction link

https://github.com/Timmmm/vue_sass_issue.git

Environment info

MacOS 10.14.

Steps to reproduce

1. Create the a new project with Vue CLI. I used Typescript & node-sass.
2. Add Element (https://element.eleme.io/)
3. Customise the style as described here: https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project
4. Add an el-input element.

What is expected?

el-input should have one style applied

What is actually happening?

You get approximately 6 copies of the Element styles applied to the el-input element. This shows the first two duplicates but you can scroll down and there are loads more:

[Timmmm]

Actually this appears to not be an issue with Element. It exposes it because it @imports the same file twice but you can easily do it yourself like this:

// theme.scss
@import "./style_a";
@import "./style_b";

// style_a.scss
.foo {
  color: red;
}

// style_b.scss
@import "./style_a"

You then get two copies of the .foo rule. I think this might be due to this issue in sass-loader which they closed as "we don't know how to fix this". :-/

[LinusBorg]

Well if you include duplicate styles, you will have duplicate styles.

You can probably config cssnano to remove duplicates during minification I'd it doesn't do that already.

We can't do much about this.

[Timmmm]

Yeah fair enough - this seems to be an inherent flaw in the was Sass works. The Chalk theme people get around it by running the output through cssmin. I guess I will do the same.

[LinusBorg]

Just to repeat : we already miniy css during build and the cssnano plugin we use should be able to remove duplicate rules as well. I think it actually does by default

Might be worth looking into before you add another tool to the chain