Using Vuetify classes within SASS

It seems the spacing helper classes (including .mr-1) are only found when importing vuetify/src/styles/main.sass instead of styles.sass. The .shrink class is found in vuetify/src/components/VGrid/_grid.sass.

So your main.sass should look like this:

@import '~vuetify/src/styles/main.sass'
@import '~vuetify/src/components/VGrid/_grid.sass' // for .shrink

.myTest
  @extend .mr-1
  @extend .shrink

sass-loader config

The original question is probably using an older version of sass-loader, given the sass.data config. If using version 8 or newer, the loader option is sass.additionalData:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // sass-loader >= 8
        additionalData: `@import "~@/path/to/main.sass"`

        // sass-loader < 8
        data: `@import "~@/path/to/main.sass"`
      }
    }
  },
}

Prepending global styles

With the sass-loader config above, importing vuetify/src/styles/main.sass in your project's root main.sass (as done in the original question) causes an error. The workaround is to copy the contents of Vuetify's main.sass into your own. However, if your app uses any Vuetify components, you'll see the same error for _grid.sass, and the same workaround applies:

// @import '~vuetify/src/styles/main.sass' ❌ SassError: This file is already being loaded.
@import '~vuetify/src/styles/tools/_index'
@import '~vuetify/src/styles/settings/_index'
@import '~vuetify/src/styles/generic/_index'
@import '~vuetify/src/styles/elements/_index'
@import '~vuetify/src/styles/utilities/_index'

// @import '~vuetify/src/components/VGrid/_grid.sass' ❌ SassError: This file is already being loaded.
.shrink
  flex-grow: 0 !important
  flex-shrink: 1 !important

.myTest
  @extend .mr-1
  @extend .shrink

This approach gets unwieldy the more you need to extend the component-specific styles.

Also, since this prepends the contents of your main.sass to all Sass entry points, you may notice a significant delay in build/dev times (hampering developer experience), and a sizable vendor CSS chunk in your build output.

Better alternatives

You could avoid the caveats above by importing your main.sass in main.js:

import '@/main.sass'

demo 1

On the other hand, if you only need these styles in a specific component, use local styles instead:

<script>
import '@/main.sass'
</script>

demo 2

<!-- or -->
<style lang="sass">
@import '~@/main.sass'
</style>

demo 3

<!-- or -->
<style lang="sass">
@import '~vuetify/src/styles/main.sass'
@import '~vuetify/src/components/VGrid/_grid.sass' // for .shrink

.myTest
  @extend .mr-1
  @extend .shrink
</style>

demo 4