egoist / styled-vue

Use dynamic styles in Vue single-file components.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Variables don't work in nuxt.js

flexscss opened this issue · comments

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
screen shot 2019-02-08 at 12 48 22

Please provide a full repro.

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)

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

Works fine for me. With css and scss.

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