Adding variables.scss file to freshly created Vuetify project causes SassError: Can't find stylesheet to import.

[wompeter]

Environment

Vuetify Version: 3.0.0-alpha @vue/cli Version: 4.5.13 Browsers: Google Chrome OS: Ubuntu 20.04

Steps to reproduce

Create a test app (with Typescript and CSS preprocessor support) and add Vuetify v3 alpha.

vue create test-app cd test-app vue add vuetify npm run build You should see a successful build.

Add a styles/variables.scss with anything in it: mkdir src/styles; echo '$font-size-root: 18px;' > src/styles/variables.scss

Re-run the build: npm run build

Observe the failure of the build with many errors:

 ERROR  Failed to compile with 39 errors                                                                                                     9:24:37 AM

 error  in ./node_modules/vuetify/lib/components/VAlert/VAlert.sass

SassError: Can't find stylesheet to import.
  ╷
2 │ @import '~vuetify/src/styles/styles.sass'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/vuetify/lib/components/VAlert/VAlert.sass 2:9  root stylesheet

Also observe that if you remove the variables.scss file, the build returns to normal and is successful again.

Expected Behavior

As the docs say, the addition of the variables.scss file should perform as expected and allow global replacement of vuetify stylings.

Actual Behavior

Can no longer compile the project.

Other comments

I have not found a workaround for this but I am no expert in webpack or SASS. On a suggestion in the Vuetify discord I tried adding @import '~vuetify/lib/styles/styles.sass' to the variables file but it had no effect.

[xdibda]

I'm running into the same issue.

There is no such path ~vuetify/src/styles/styles.sass in Vuetify 3 alpha.
The new path seems to be ~vuetify/lib/styles/styles.sass as it differs from Vuetify 2.