Variables don't work in nuxt.js

[flexscss]

I try

style: scss`
    .index {
      width: 100vh;
      height: 100vh;
      background: ${vm => vm.$store.state.theme.colors.primary};
      color: ${vm => vm.color};
    }
  `

but variables don't work

[egoist]

Please provide a full repro.

[souavds]

I'm with the same problem (i'm using nuxt as well)

style: css`
    .container2 {
      background-color: ${vm => vm.backgroundColor};
    }
  `,
  data() {
    return {
      backgroundColor: 'red'
    }
  },

but the browser just put a

background-color: var(--v0);

I've tried the example that is on the documentation and it doesn't work either. Also the Preprocessors doesn't work (I have sass-loader and node-sass installed):

ERROR in ./pages/teste.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/home/arthurvdiniz/dev/sites/acervus-publico/pages/teste.vue
  9:10  error  scss not found in 'styled-vue'  import/named

✖ 1 problem (1 error, 0 warnings)

[jankal]

@egoist Same thing here. Preprocessors won't work.

[christophwolff]

Works fine for me. With css and scss.

Sample Repo here: https://github.com/christophwolff/nuxt-styled-vue-sample