Vuetify: [Bug Report] Vuetify not working with .scss file

[rafaelmaiach]

Versions and Environment

Vuetify: 2.0.0-beta.7
Vue: 2.6.10
Browsers: Chrome 75.0.3770.100
OS: Mac OS 10.14.5

Steps to reproduce

npm run serve

Expected Behavior

Application working without errors

Actual Behavior

Running development mode shows a message about vue.config.js
Expected ";" on @import "~@/scss/main.scss"

If I add the missing ";" the error persists but change the message to:
Semicolons aren't allowed in the indented syntax.

Reproduction Link

https://github.com/rafaelmaiach/vuetify-issue

Other comments

I followed the SASS Variables setup on Vuetify version 2 website.
It said about a chainWebpack config if I was using .sass files, but I'm using .scss files, that's why this step is not configurable.

This problem also makes I'm unable to use custom variables on the application.

The repository was created with Vue CLI 3 and vuetify added using the steps informed on Release 2.0.0-beta.0

[KaelWD]

Duplicate of https://github.com/vuejs/vue-cli/issues/4116

[rayfoss]

I can confirm @vue/cli-service 3.11 fixed this issue for me... just had to load a blank sass file next to all my scss.

[Giildo]

@rayfoss Can you give us an example? Please :smile:

[rayfoss]

I just came here to the party for the bugs. @Giildo

Remember this only works with @vue/cli-service 3.11 or later
vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"` // empty file
      },
      scss: {
        // My very particular set of styles I have acquired over a long career
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  }
}

[daxdax89]

I still have this issue

[mwauramuchiri]

I just came here to the party for the bugs. @Giildo

Remember this only works with @vue/cli-service 3.11 or later
vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"` // empty file
      },
      scss: {
        // My very particular set of styles I have acquired over a long career
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  }
}

This worked for me. Thanks!