How can I use scss in vue templates

Hello, I’m trying to use scss in my components.

It works fine if I import a scss file

<style lang="scss" scoped>
  @import "../../assets/app.scss"
</style>

But if I use the scss code directly webpack doesn’t recognise it:

<style lang="scss" scoped>
nav {
  background-color: $nav-dark;
  color: $white;
  width: 15rem;
    a {
      color: $white;
      width: 100%;
    }
}
</style>

Invalid CSS after "nav": expected 1 selector or at-rule, was "{"

I installed node-sass and sass-loader Did I miss anything? Thanks for your help.

[PierBover]

@benmccallum your problem is that you are using type instead of lang.

<style type="scss" scoped>

Should be:

<style lang="scss" scoped>

Docs: https://vuejs.org/v2/guide/single-file-components.html

[maxmilton]

@ferllings did you install the dependencies as mentioned in the docs? npm install sass-loader node-sass --save-dev