[Bug Report] Vuetify not working with .scss file

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

[FossPrime]

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