How to convert existing webpack code to chainWebpack? - vue.js

Question

I write Vue2 app using Vuetify2. I need to add sass-loader to webpack as per docs: https://vuetifyjs.com/en/getting-started/installation/#webpack-install
So I need to edit webpack and want to do this using chainWebpack. According to docs I can do it in vue.config.js. The issue is that I don't know how to properly 'convert' regular webpack snippet to chaining. I need to chain this:
// webpack.config.js
module.exports = {
module: {
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
},
},
},
],
},
],
}
}
and this is my vue.config.js file where I tried to use chainWebpack (note that transpileDependencies was in this file before, I don't touch it and it must be here):
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
],
chainWebpack: config => {
config.module
.rule('sass')
.test(/\.s(c|a)ss$/)
.use('vue-style-loader','css-loader',)
.loader('sass-loader')
.tap(options => {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
}
return options
})
}
})
However it doesn't work.