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