Webpack: How can I use scss in vue templates

[ferllings]

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.

[maxmilton]

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

[ferllings]

Yes

I installed node-sass and sass-loader

[LinusBorg]

please provide the repository. This works without any issues for me (provided the vairables exist).

[PierBover]

Could it be that the variable doesn't exist?

background-color: $nav-dark;

Even if you import an .scss file in another .vue file that doesn't make your variables globally accessible. You have to import your .scss variables in every .vue file you want to use them as explained here:

https://github.com/vuejs/vue-loader/issues/328

[ferllings]

Yes the variable exists and is imported from a scss file before this instruction.
I'll get back to you in few weeks (I'm on holiday), and provide a repository
Thanks for your help so far.

[benmccallum]

I'm getting the same issue. Inspecting the generated CSS in Chrome DevTools the output is just what I've written in my *.vue file, unprocessed. i.e. I'm doing nested styles and the nested structure is spat out to browser.

Should be able to reproduce with this app I'm playing around with and you can see in components/Home.vue I'm trying to do nesting in my styling like #options { a { ... } that isn't being compiled into proper CSS on front-end.

Help much appreciated :)

Edit: I generated this project about 1 week ago using the vue-cli (v2.8.2) and this repo (webpack) template.

[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

[benmccallum]

Oh wow, sorry. Huge fail on my part. Had read the docs and all but old habits I guess with typing "type". Thanks! Not sure if the OP would consider this closed though :p

[mdmasumbillah]

But I want to use this style. Code below

template

<style type="text/css">
    body, html {
        overflow: hidden;
    }
</style>

....

template

Please help me.

[PierBover]

For regular CSS you don't need to specify lang, and type is never used for the style tag in vue components.