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

Posted 2023-02-22

【中文标题】Node Sass 还不支持你当前的环境：Vuetify 升级失败

【英文标题】：Node Sass does not yet support your current environment: Vuetify upgrade fails

【发布时间】：2020-01-25 13:17:26

【问题描述】：

我正在尝试将 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"
  

我尝试了以下操作，但似乎没有任何效果。

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

【参考方案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';` ))
    )
  

【讨论】：

感谢您的回答，我刚刚使用@nuxtjs/vuetify解决了它