Lỗi Sass Loader: Đối tượng tùy chọn không hợp lệ không khớp với lược đồ API

Tôi đang sử dụng VueJS với khung VuetifyJS (v2.0.19). Tôi đang gặp lỗi này sau khi chạy npm chạy phục vụ :

Sass Loader đã được khởi tạo bằng cách sử dụng một đối tượng tùy chọn không khớp với lược đồ API.

Những gì tôi đã thử: Tôi đã xóa thư mục node_modules và cài đặt lại / cập nhật tất cả các gói npm và node.js lên phiên bản ổn định mới nhất.

Thông báo lỗi đầy đủ:

 error  in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VRangeSlider/VRangeSlider.js
 @ ./node_modules/vuetify/lib/components/VRangeSlider/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.2.115:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/vuetify/src/styles/main.sass

Gói của tôi.json:

  {
  "name": "app",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.2.1",
    "fibers": "^4.0.1",
    "firebase": "^7.0.0",
    "material-icons": "^0.3.1",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-flickity": "^1.2.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.0.19",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.12.0",
    "prettier": "1.18.2",
    "sass-loader": "^8.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Làm thế nào để giải quyết vấn đề này?

Có vẻ như vấn đề tương tự ở đây: https://github.com/JeffreyWay/laravel-mix/issues/2206

Giải pháp là

npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0

Nếu bạn đang sử dụng vue-cli 4và để tránh lỗi này, bạn cần phải thay đổi cấu hình của sass-loadertrong vue.config.jsgiống như ví dụ dưới đây, sau đó các lỗi sẽ được cố định.

const path = require('path');

module.exports = {
  chainWebpack(config) {
    config
      .entry('app')
      .clear()
      .add('./src/core/main.js')
      .end();
    config.resolve.alias
      .set('~', path.join(__dirname, './src'))
      .set('@', path.join(__dirname, './src/core'))
      .set('#', path.join(__dirname, './src/modules'))
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, 'src/core/')
          ],
          indentedSyntax: true,
        },
        prependData: '@import "~@/assets/sass/main.scss"',
      },
    },
  },
  assetsDir: '@/assets/',
}

Đừng quên chỉ định cấu hình của riêng bạn. Vui lòng kiểm tra cấu hình trên repo sass-loader .

Nếu bạn sử dụng vue cli 3, nó hoạt động với sass-loader v7không v8nếu bạn sử dụng vue cli 3và sass-loader v7cấu hình trước đó vẫn hoạt động.

Chúc may mắn và trân trọng.

indentedSyntaxlà một phần của sassOptions:

sassOptions: {  indentedSyntax: true  }

Ví dụ:

{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            indentedSyntax: true
        }
    }
}

Vì vậy - thay đổi cấu hình Webpack của bạn để phản ánh điều đó.

Trong trường hợp của tôi, tôi đã phải hạ cấp bộ tải sass, sau đó tôi đã nhận được lỗi thực sự phát ra trên thiết bị đầu cuối khi tôi chạy ng serve, đó là lỗivue-cli-service trong trường hợp của bạn, tôi nghĩ đó là vấn đề với v8 của bộ tải sass, sẽ đào sâu hơn

Trong thời gian này, điều này có thể giúp: Trong gói.json, hãy chỉnh sửa trình tải sass để đọc "sass-loader": "7.0.1",