[Bug Report] Unable to utilize SASS variables - breaks build and testing processes

Versions and Environment

Vuetify: 2.0.0 Vue: 2.6.10 Browsers: Chrome 75.0.3770.142 OS: Mac OS 10.14.5

Steps to reproduce

• Clone the repo
• npm i
• start dev server
• observe build process output

Expected Behavior

No errors

Actual Behavior

Errors relating to using sass variables on single-file components.

Reproduction Link

https://github.com/MatthewAry/vuetify-sass-variables

Other comments

Some background

I followed the directions https://vuetifyjs.com/en/customization/sass-variables and did some experiments. Attempts to try to use Single File components with styles with the instructions to override vuetify SASS variables fails. https://vuetifyjs.com/en/customization/sass-variables#single-file-components attempts to address this problem but it does not seem to work.

This code:

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
}

will break the build process.

So will this code:

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss";`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('sass').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.sass'` }))
    })
  }
}

Note that the Object.assign(opt, { data: `@import '~@/sass/main.sass'` }) and the data: `@import "~@/sass/main.scss";`, paths are different? Trying to make them match also does not fix the problem.

Related to: https://github.com/vuejs/vue-cli/issues/4116 Related to: #7795 Documentation Reference: https://vuetifyjs.com/en/customization/sass-variables

[nekosaur]

So I think I got this working in your test repo in two different ways depending on if you want to use scss or sass in the SFC.

sass

Note the absence of a ; on the import statement

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: '@import "~@/sass/main.scss"',
      implementation: require("sass"),
      fiber: require("fibers")
    }
  },
  sourceMap: true
}

You can then use sass style in SFC and use variables

<style lang="sass">
.test
  color: map-get($red, 'base')
</style>

scss

Note the config modification where we make sure there is a ; present when using scss

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: '@import "~@/sass/main.scss"',
      implementation: require("sass"),
      fiber: require("fibers")
    }
  },
  sourceMap: true
},
chainWebpack: config => {
  ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
    config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
  });
}

You can then use scss in SFC

<style lang="scss">
.test {
  color: map-get($red, "base");
}
</style>

[MatthewAry]

It seems that the documentation that was added in response to this issue has been removed since Vuetify 2.2. What is the recommended way to create global styles that may even override vuetify styles with this update?