Node Sass does not yet support your current environment: Vuetify upgrade fails

Question

I'm trying to upgrade Vuetify 1.5.+ to 2.0.+ but facing some issues while adding node-sass library. Initially when I installed sass-loader": "^8.0.0" it showing some syntax error as follows.

So in order to fix the issue, I just downgraded sass-loader from 8.+ to 7.+ after that it throwing some other issue as follows.

After that, I just tried different versions and all showing the same issue and within the link its shows as supported - https://github.com/sass/node-sass/releases/tag/v4.9.4(OSX and node version 10). Even I'd tried different node version and nothing seems to be working.

Current node version: v10.16.3

package.json :

{
   /***.. ................ other details ******/

  "dependencies": {
    "@mdi/font": "^3.5.95",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^2.6.0",
    "await-to-js": "^2.1.1",
    "boxen": "^3.1.0",
    "cli-table": "^0.3.1",
    "colors": "^1.3.3",
    "commander": "^2.19.0",
    "cross-env": "^5.2.0",
    "debug": "^4.1.1",
    "emittery": "^0.4.1",
    "express": "^4.16.4",
    "fast-levenshtein": "^2.0.6",
    "glob": "^7.1.3",
    "jsonfile": "^5.0.0",
    "knex": "^0.19.2",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "mkdirp": "^0.5.1",
    "moment": "^2.24.0",
    "monaco-editor": "^0.16.2",
    "monaco-editor-webpack-plugin": "^1.7.0",
    "monaco-themes": "^0.2.5",
    "mssql": "^5.0.5",
    "mysql": "^2.16.0",
    "nano-assign": "^1.0.1",
    "nodemailer": "^6.3.0",
    "nuxt": "^2.8.1",
    "nuxt-material-design-icons": "^1.0.4",
    "oracledb": "^3.1.2",
    "pg": "^7.9.0",
    "pify": "^4.0.1",
    "popper.js": "^1.14.7",
    "rmdir": "^1.2.0",
    "sql-formatter": "^2.3.2",
    "sqlite3": "^4.0.8",
    "stripe": "^6.32.0",
    "tcp-port-used": "^1.0.1",
    "v-hotkey": "^0.3.1",
    "vee-validate": "^2.2.0",
    "vue": "^2.6.10",
    "vue-click-outside": "^1.0.7",
    "vue-drag-resize": "^1.3.2",
    "vue-draggable-resizable": "^2.0.0-rc1",
    "vue-monaco": "^0.3.1",
    "vue-recaptcha": "^1.1.1",
    "vue-shortcuts": "^1.1.2",
    "vue-shortkey": "^3.1.7",
    "vue-stripe-elements-plus": "^0.2.9",
    "vuetify": "^2.0.18",
    "vuetify-loader": "^1.2.1",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "chai": "^4.2.0",
    "chokidar": "^2.1.5",
    "cross-env": "^5.1.4",
    "deepmerge": "^4.0.0",
    "devtron": "^1.4.0",
    "electron": "^4.1.4",
    "electron-builder": "^20.39.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-renderer": "^2.0.4",
    "eslint": "6.4.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "fibers": "^4.0.1",
    "jsdoc": "^3.5.5",
    "minami": "^1.2.3",
    "mocha": "^6.0.2",
    "node-sass": "4.9.4",
    "nodemon": "^1.18.9",
    "nyc": "^14.1.1",
    "prettier": "^1.16.4",
    "sass": "^1.22.12",
    "sass-loader": "^7.1.0",
    "should": "^13.2.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

I'd tried following things but nothing seems to be working.

1. Tried different versions and done npm rebuild node-sass
2. Cleared npm cache, removed node_modules and then npm install

Answer 1

I hope this will be helpful to you.

first, check version of sass & sass-loader library.

"devDependencies": {
  "@vue/cli-plugin-babel": "^3.9.0",
  "@vue/cli-plugin-eslint": "^3.9.0",
  "@vue/cli-service": "^3.9.0",
  "sass": "^1.18.0",
  "sass-loader": "^7.1.0",
  "deepmerge": "^4.0.0"
}

second, check your syntax loaderOptions and chainWebpack.

you have to use semicolon ; in SCSS rules

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
  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';` }))
    })
  }
}