Sass लोडर त्रुटि: अमान्य विकल्प ऑब्जेक्ट जो API स्कीमा से मेल नहीं खाता है

Question

मैं फ्रेमवर्क के साथ VueJS का उपयोग कर रहा हूँ VuetifyJS (v2.0.19)। Npm रन सर्व करने के बाद मुझे यह त्रुटि हो रही है :

Sass लोडर को एक विकल्प ऑब्जेक्ट का उपयोग करके आरम्भ किया गया है जो API स्कीमा से मेल नहीं खाता है।

मैंने क्या प्रयास किया: मैंने नोड_मॉडल फ़ोल्डर को हटा दिया है और नवीनतम स्थिर संस्करण के लिए सभी npm संकुल और नोड.जेएस को पुन: स्थापित / अपडेट किया है।

पूर्ण त्रुटि संदेश:

 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

मेरा पैकेज।

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

इस समस्या को कैसे ठीक करें?

Answer 1

यहाँ एक ही मुद्दे की तरह लगता है: https://github.com/JeffreyWay/laravel-mix/issues/2206

समाधान है

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

Comments

डाउनग्रेडिंग मुझे कभी भी सबसे सुरुचिपूर्ण दृष्टिकोण की तरह नहीं लगी, फिर भी यह एकमात्र चीज है जिसने मेरे लिए चाल चली। नीचे दिए गए जवाब stackoverflow.com/users/5302733/… , हालांकि, पूर्ण, मुझे एक ही त्रुटि के साथ छोड़ दिया।

— crocodile2u

इसने मेरे लिए भी काम किया।

— हसन दाद खान

Answer 2

आप उपयोग कर रहे हैं vue-cli 4और व्यवस्था इस त्रुटि से बचने के लिए आप की config को बदलने की जरूरत sass-loaderमें vue.config.js, नीचे दिए गए उदाहरण की तरह उस के बाद त्रुटि को ठीक कर दिया जाएगा।

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/',
}

अपना स्वयं का कॉन्फ़िगरेशन निर्दिष्ट करना न भूलें। कृपया sass-लोडर रेपो पर कॉन्फ़िगरेशन की जाँच करें ।

आप का उपयोग करते हैं vue cli 3, यह साथ काम करता है sass-loader v7के साथ नहीं v8है, तो आप का उपयोग करें vue cli 3और sass-loader v7पिछले विन्यास अभी भी काम करता है।

सौभाग्य और संबंध है।

Comments

मेरी समस्या का समाधान किया। धन्यवाद।

— फर्मिनो चंगानी

Answer 3

indentedSyntaxका हिस्सा है sassOptions:

sassOptions: {  indentedSyntax: true  }

उदाहरण के लिए:

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

तो - यह दर्शाने के लिए अपना वेबपैक कॉन्फिगर बदलें।

Comments

मैं इसे चलाने के लिए प्राप्त नहीं कर सकता और नए वेबपैक का उपयोग करने के लिए CLI के भीतर एक त्रुटि प्राप्त कर रहा हूं। LaderOptionsPlugin ({ क्योंकि लोड विकल्प पुराना है। मैं वेबपैक को कॉन्फ़िगर करने के लिए vue.config.js (Vue CLI 3) का उपयोग कर सकता हूं। क्या आप कृपया कर सकते हैं। कुछ और विवरण पोस्ट करें।

— टॉम

आपने एप्लिकेशन कैसे बनाया है (टेम्पलेट के साथ इनयूट

— व्यू

Answer 4

मेरे मामले में मुझे sass-लोडर को डाउनग्रेड करना पड़ा, जिसके बाद मुझे चलाने पर मुझे टर्मिनल पर वास्तविक त्रुटि मिली ng serve, जो vue-cli-serviceआपके मामले में हो , मुझे लगता है कि यह sass- लोडर के v8 के साथ एक समस्या है, आगे खुदाई करेगा

इस बीच, यह मदद कर सकता है: package.json में, पढ़ने के लिए sass-loader संपादित करें "sass-loader": "7.0.1",