How to correctly add preset to Vuetify? - vue.js

Question

I use Vuetify2 and have a problem adding preset to my Vue2 app. There are errors thrown up. I installed preset through vue add vuetify-preset-rally and then added to vuetify.js as follows:
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import { preset } from 'vue-cli-plugin-vuetify-preset-rally/preset'
Vue.use(Vuetify);
export default new Vuetify({
preset,
rtl: true,
theme: {dark : true}
});
I followed official Vuetify documentation. I got a bunch of errors, most of them are sth like this:
ERROR in ./node_modules/vuetify/src/styles/main.sass
(./node_modules/css-loader/dist/cjs.js??clonedRuleSet-29.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-29.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-29.use[3]!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been
initialized using an options object that does not match the API
schema.
options has an unknown property 'prependData'. These properties are valid: object { implementation?, sassOptions?, additionalData?,
sourceMap?, webpackImporter? }
at validate (D:\SalesCore\salescore\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:105:11)
at Object.loader (D:\SalesCore\salescore\node_modules\sass-loader\dist\index.js:30:29)
I also tried to add the whole string to preset but it doesn't change anything:
export default new Vuetify({
preset: 'vue-cli-plugin-vuetify-preset-rally/preset',
rtl: true,
theme: {dark : true}
});
My package.json:
{
"name": "salescore",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
"vuex": "^3.6.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-cli-plugin-vuetify-preset-rally": "~1.0.4",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
}
}
Why there are problems and how to overcome it? I use v-app in my application.
EDIT:
I installed some dependencies and configured my webpack through vue.config.js. Just copied snippet from official docs but there is some problem with this webpack (I used vue inspect to check if all is ok and snippet was added to webpack) - it throws an error on compilation:
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
],
configureWebpack: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true // optional
},
// Requires >= sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
},
},
},
],
},
],
}
})
Error:
ValidationError: Invalid configuration object. Webpack has been
initialized using a configuration object that does not match the API
schema.