Estoy usando VueJS con el marco VuetifyJS (v2.0.19). Recibo este error después de ejecutar npm run serve :
Sass Loader se ha inicializado utilizando un objeto de opciones que no coincide con el esquema de la API.
Lo que probé: eliminé la carpeta node_modules y reinstalé/actualicé todos los paquetes npm y node.js a la última versión estable.
Mensaje de error completo:
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.sassMi paquete.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" ] }¿Cómo arreglar este problema?
Parece el mismo problema que aquí: https://github.com/JeffreyWay/laravel-mix/issues/2206
La solución es
npm uninstall --save-dev sass-loader npm install --save-dev sass-loader@7.1.0Si está utilizando vue-cli 4 y para evitar este error, debe cambiar la configuración de sass-loader en vue.config.js como en el ejemplo a continuación, después de eso, el error se solucionará.
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/', }No olvide especificar su propia configuración. Consulte la configuración en el repositorio de sass-loader .
Si usa vue cli 3 , funciona con sass-loader v7 no con v8 si usa vue cli 3 y sass-loader v7 la configuración anterior aún funciona.
Buena suerte y saludos.
ACTUALIZACIÓN (2021):
Como dijo @gdaniel en el comentario, el equipo de sass-loader cambió de prependData a additionalData propiedad AdditionalData en las opciones, como puede ver en la siguiente confirmación 062991588769f2 .