node-sass property 'data' overwrites component styles

[holgerw]

Node-sass has a 'data' property that could be used to prepend common statements into sass scopes. This would be very useful to import common sass, like variables, in every component.
But setting the 'data' property, actually overwrites the components styles.

Expected behavior

vue({
  scss: {
    includePaths: ['./src/styles'],
    data: '@import "_variables";'
  }
})

should import shared variables into the styles of every component with lang="scss", prepending the content of the 'data' property to the component's style code.

Actual behavior

The content of the 'data' property overwrites the styles of every component with lang="scss".

Why is it important

The expected behavior would be a very dry way to maintain common Sass code, relevant for every component, like variables and mixins.

The 'data' property seems to work as expected with webpack, as discussed here vuejs-templates/webpack#149

[antoinerey]

Hello !

I'm trying to use the scss.data configuration and it's still overwriting the components styles. I'm using it like :

vue({
  scss: {
    data: '$color: tomato'
  }
})

Note: I'm using rollup-plugin-vue@3.0.0

[Minasokoni]

@antoinerey did you ever figure it out? I'm also trying to pass variables and they aren't working

[antoinerey]

@Minasokoni To be honest, I can't even recall why I encountered this issue. Sorry 🤷‍♂️