Node Sass尚不支持您当前的环境：Vuetify升级失败

Question

我正在尝试将Vuetify 1.5.+升级到2.0.+，但是在添加node-sass库时遇到了一些问题。最初，当我安装sass-loader": "^8.0.0"时，它显示出一些语法错误，如下所示。

因此，为了解决该问题，我将sass-loader从8.+降级为7.+，之后又引发了其他一些问题。

之后，我只是尝试了不同的版本，并且都显示了相同的问题，并且在链接中显示了受支持的版本-https://github.com/sass/node-sass/releases/tag/v4.9.4(OSX和节点版本10）。即使我尝试了不同的节点版本，也似乎无济于事。

当前节点版本： 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"
  }
}

我尝试了以下操作，但似乎无济于事。

1. 尝试了不同的版本并完成了 npm重建node-sass
2. 清除了npm缓存，删除了node_modules，然后删除了npm install

Answer 1

希望对您有帮助。

首先，检查sass和sass-loader库的版本。

"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"
}

第二步，检查语法loaderOptions和chainWebpack。

您必须在SCSS规则中使用分号;

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';` }))
    })
  }
}