嗨，我正在Vuetify v2.2上使用自定义组件，这些组件在构建过程中会引发错误。我不知道Vuetify v2.2有什么问题因为Vuetify v2.1.15运行良好。
引发错误消息：
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
在CTextarea中，我像这样导入VTextarea和VInput：
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
})
我认为此错误与sass＆postcss相关。我希望构建成功。
我必须在自定义组件中使用Vue.config.optionMergeStrategies选项。
我的软件包依赖关系和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"
},
}
您的依赖项中没有postcss-loader程序包。您是否尝试安装它？
npm i -D postcss-loader
我个人更喜欢使用nuxt文档中建议的node-sass和sass-loader软件包：https://nuxtjs.org/faq/pre-processors/
npm install --save-dev node-sass sass-loader
希望有帮助！
我终于解决了。
这个问题是我对Treeshakes的错误。
所以我固定了可变的scss文件和组件直接导入。
我希望有人对此有所帮助。
在组件中
// wrong
import { VTextField } from 'vuetify/lib'
// Correct
import { VTextField } from 'vuetify/lib/components/VTextField'
在可变的scss文件中。可以输入@import 'vuetify/src/styles/styles.sass';只需在根文件中放置一个时间（在webpack guild的options.prependData或options.data中。）
@import 'vuetify/src/styles/styles.sass';
// some global values
// some components values
并且...当应该在对象类型（？）中固定颜色或此类值时，请使用map-deep-merge。
$purple: ();
$purple: map-deep-merge(
(
'base': #6255c5
),
$purple
);
$shades: ();
$shades: map-deep-merge(
(
'black': #2D2935,
'white': #FFFFFF
),
$shades
);
快乐编码！