关闭 - 无法构建 Vuetify v2.2 并出现 sass 错误答案

【问题标题】：closed -- Couldn't build Vuetify v2.2 with sass error关闭 - 无法构建 Vuetify v2.2 并出现 sass 错误
【发布时间】：2020-01-17 10:08:58
【问题描述】：

您好，我在 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"
  },
}

如果您需要更多信息，请发表评论。我真的希望能解决它。

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

您的依赖项中没有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

希望对你有帮助！

【讨论】：

postcss-loader 包含在 nuxt 中。所以不需要再次安装。并且 sass 和 sass-loader 与 @nuxtjs/vuetify 一起安装。所以这也不需要

【解决方案2】：

我终于修好了。

这个问题是我在使用 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's 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
);

编码愉快！

【讨论】：