[Bug Report] sass:math error when using custom variables

[flahol]

Problem to solve

Error when compiling
error in ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/src/components/VSlider/VSlider.sass

Syntax Error: SassError: @use rules must be written before any other rules.
╷
4 │ @use 'sass:math'
│ ^^^^^^^^^^^^^^^^
╵
node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/src/components/VSlider/VSlider.sass 4:1 root stylesheet

@ ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/src/components/VSlider/VSlider.sass 4:14-362 15:3-20:5 16:22-370
@ ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/VSlider/VSlider.js
@ ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/VSlider/index.js
@ ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/index.js
@ ./node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/index.js
@ ./src/plugins/vuetify.js
@ ./src/main.js
@ multi ./node_modules/.pnpm/[email protected][email protected]/node_modules/webpack-dev-server/client?http://192.168.1.151:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[KaelWD]

Workaround is to load your custom variables with @use instead of @include. If you're using vue-cli-plugin-vuetify you need to move the variables file out of the watched folders (src/styles, src/sass, or src/scss) and add the following to your vue.config.js:

css: {
  loaderOptions: {
    sass: { additionalData: '@use "@/variables.scss" as *' },
    scss: { additionalData: '@use "@/variables.scss" as *;' },
  }
}

[flahol]

@KaelWD
Your proposed solution works, thanks

[wemod123]

how to workaround when using @nuxtjs/vuetify module

[jscottsf]

This issue just blew up my project. Also interested in @nuxtjs/vuetify solution. Thx for opening this. :)

[jscottsf]

This could be of interest.

nuxt-community/vuetify-module#450

[mlockett42]

@KaelWD 's solution unfortunately did not work for me and I had to force back to version 2.5.1 in my package.json (which worked)

[polymer-coder]

@mlockett42 even after forcing my dependency to 2.5.1, deleting node_modules and package-lock.json then running npm install, I've had no luck

[inane]

@mlockett42 even after forcing my dependency to 2.5.1, deleting node_modules and package-lock.json then running npm install, I've had no luck

Same scenario and same result..

[inane]

This works for me:

npm install [email protected]
npm install [email protected]

[duongvanle]

@KaelWD
Hello.
I tried to do as you suggested. My app can build fine, but all scss variables do not work. No one of them change my HTML style on my app. My variables.scss is only:
@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap');
$body-font-family: 'Livvic', sans-serif;

[domness]

@KaelWD
Hello.
I tried to do as you suggested. My app can build fine, but all scss variables do not work. No one of them change my HTML style on my app. My variables.scss is only:
@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap');
$body-font-family: 'Livvic', sans-serif;

This happened to me as well. I've decided to revert to an older Vuetify for the moment until this is fixed.

[Dickens-Shaw]

This works for me:

npm install [email protected]
npm install [email protected]

it works

[Oleksii14]

I am trying to migrate to vuetify 2.5.2 and sass 1.33, but I am still receving the "sass:math" errors in the console

"dependencies": {
    "@mdi/js": "5.9.55",
    "@vue/composition-api": "1.0.0-rc.10",
    "axios": "0.21.1",
    "core-js": "3.13.1",
    "date-fns": "2.22.1",
    "pinia": "0.5.1",
    "typeface-montserrat": "1.1.13",
    "vue": "2.6.13",
    "vue-i18n": "8.24.4",
    "vue-router": "3.5.1",
    "vuetify": "2.5.2"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "2.2.0",
    "@types/jest": "26.0.23",
    "@types/mocha": "8.2.2",
    "@typescript-eslint/eslint-plugin": "4.26.0",
    "@typescript-eslint/parser": "4.26.0",
    "@vue/cli-plugin-babel": "5.0.0-beta.1",
    "@vue/cli-plugin-e2e-webdriverio": "5.0.0-beta.1",
    "@vue/cli-plugin-eslint": "5.0.0-beta.1",
    "@vue/cli-plugin-router": "5.0.0-beta.1",
    "@vue/cli-plugin-typescript": "5.0.0-beta.1",
    "@vue/cli-plugin-unit-jest": "5.0.0-beta.1",
    "@vue/cli-service": "5.0.0-beta.1",
    "@vue/eslint-config-prettier": "6.0.0",
    "@vue/eslint-config-typescript": "7.0.0",
    "@vue/test-utils": "1.2.0",
    "chromedriver": "90.0.1",
    "cross-env": "7.0.3",
    "electron": "13.0.1",
    "electron-devtools-installer": "3.2.0",
    "eslint": "7.27.0",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-vue": "7.10.0",
    "lint-staged": "11.0.0",
    "prettier": "2.3.0",
    "sass": "1.33.0",
    "sass-loader": "12.0.0",
    "spectron": "15.0.0",
    "ts-node": "10.0.0",
    "typescript": "4.3.2",
    "vue-cli-plugin-electron-builder": "2.0.0",
    "vue-cli-plugin-vuetify": "2.4.0",
    "vue-template-compiler": "2.6.13",
    "vuetify-loader": "1.7.2",
    "wdio-chromedriver-service": "7.1.0"
  },

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: { additionalData: `@use "@/styles/variables.scss" as *;` },
    },
  },
};

[Dickens-Shaw]

@Oleksii14 try [email protected] & [email protected]

[Oleksii14]

@Dickens-Shaw my question is how to migrate correctly, not to use the old version of those deps 😄

[Dickens-Shaw]

@Oleksii14 got it! I tried as well, but give up now!😭

[Oleksii14]

@KaelWD any ideas?

[Oleksii14]

@KaelWD can you take a look at my package file and tell me what may be wrong there? How can I migrate to sass 1.34 and vuetify 2.5.3 correctly?

[KaelWD]

You can't, see #13694 (comment)