closed -- Couldn't build Vuetify v2.2 with sass error - vuetify.js

Question

Hi I am using custom components on Vuetify v2.2, which are throwing error during build.
I can't figure out, what's the problem with Vuetify v2.2
because Vuetify v2.1.15 was working well.
Thrown error message:
ERROR in ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
at /home/ubuntu/chainflix-nuxt-tar/node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass:1:257
at stringifyNode (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:2:19)
at Function.stringify (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:45:10)
at Gradient.colorStops (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:503:26)
at Gradient.oldWebkit (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:396:10)
at Gradient.replace (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:89:30)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/value.js:148:20)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:570:35)
at Gradient.process (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/prefixer.js:155:16)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/processor.js:379:36
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:190:18
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:135:18
at Rule.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:148:24
at Root.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Root.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
# ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass 4:14-213
# ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./components/inc/vuetifyCustom/CTextarea/CTextarea.js
# ./components/inc/vuetifyCustom/CTextarea/index.js
# ./plugins/GlobalComponent.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
In CTextarea I imported VTextarea and VInput like this:
import { VTextarea, VInput } from 'vuetify/lib'
import 'vuetify/src/components/VTextarea/VTextarea.sass'
import { CTextField } from '../CTextField'
export default Vue.extend({
name: 'CTextarea',
extends: VTextarea.extend(),
///// etc custom codes
})
I think this error has some correlation with sass & postcss.
I hope to Build Successfully.
I must using Vue.config.optionMergeStrategies options in custom components.
My package dependencies & devDependencies
{
"dependencies": {
"#babel/runtime-corejs3": "^7.6.3",
"#nuxtjs/axios": "^5.8.0",
"#nuxtjs/moment": "^1.4.0",
"#nuxtjs/style-resources": "^1.0.0",
"base64toblob": "0.0.2",
"bigdecimal": "^0.6.1",
"camelcase-keys": "^5.2.0",
"core-js": "^3.3.6",
"cross-env": "^5.2.1",
"crypto": "^1.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.4",
"filestream": "^4.1.3",
"firebase": "^7.5.2",
"form-data": "^2.5.1",
"intersection-observer": "^0.7.0",
"ip-regex": "^4.1.0",
"morgan": "^1.9.1",
"nuxt": "^2.10.2",
"qrcode": "^1.4.3",
"snakecase-keys": "^2.1.0",
"socket.io-client": "^2.3.0",
"uuid": "^3.3.3",
"vue-clipboard2": "^0.3.1",
"vue-drag-drop": "^1.1.4",
"vue-google-charts": "^0.3.2",
"vue-i18n": "^8.15.0",
"vue-lottie": "^0.2.1",
"vue-ls": "^3.2.1",
"vue-qrcode": "^0.2.2",
"vuedraggable": "^2.23.2",
"vuejs-logger": "^1.5.3"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.6.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.6.0",
"#babel/plugin-transform-regenerator": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/plugin-transform-template-literals": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"#babel/register": "^7.6.2",
"#babel/runtime": "^7.6.3",
"#nuxt/babel-preset-app": "^2.10.2",
"#nuxtjs/eslint-config": "^0.0.1",
"#nuxtjs/vuetify": "^1.10.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"nodemon": "^1.19.4",
"prettier": "^1.16.4",
"regenerator-runtime": "^0.13.2",
"sass": "^1.23.3",
"vue-style-loader": "^4.1.2",
"webpack-bundle-analyzer": "^3.6.0"
},
}
If you need more informations, comment please. I really hope to fix it.

Answer 1

You do not have a postcss-loader package in your dependencies.
Have you tried installing it?
npm i -D postcss-loader
Personally i would prefer using the node-sass and sass-loader package as suggested in the nuxt docs: https://nuxtjs.org/faq/pre-processors/
npm install --save-dev node-sass sass-loader
Hope it helps!

Answer 2

I finally fixed.
This problem was my mistakes with Treeshakes.
so I fixed variable scss files and components direct import.
I hope someones are helpful with this.
In components
// wrong
import { VTextField } from 'vuetify/lib'
// Correct
import { VTextField } from 'vuetify/lib/components/VTextField'
In variable scss files. May you imported #import 'vuetify/src/styles/styles.sass';
That is need just a time in root file ( In webpack guild's options.prependData or options.data. )
#import 'vuetify/src/styles/styles.sass';
// some global values
// some components values
And... Use map-deep-merge, when you should fix color or such value in Object type(?).
$purple: ();
$purple: map-deep-merge(
(
'base': #6255c5
),
$purple
);
$shades: ();
$shades: map-deep-merge(
(
'black': #2D2935,
'white': #FFFFFF
),
$shades
);
Happy coding!