Tiptap for Vuetify SassError: SassError: Invalid CSS

Question

有人在尝试为 Vuefity 安装 WYSIWYG 编辑器 Tiptap 时出现此错误吗？

这是错误：

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 6 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 3 of /home/fc-gui/node_modules/vuetify/src/styles/main.sass
>>     @content($material-light); }

   ----^

然后这是我的主要 Vue 文件：

/* eslint no-console: 0 */

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '../app.vue'
import Vuetify from 'vuetify'
import getShop from '../api/shops'
import customizationApi from '../api/customization'
import { routes } from '../router/routes'
import store  from '../store/store'
import axios from 'axios'
import VueFriendlyIframe from 'vue-friendly-iframe';
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'

Vue.use(VueFriendlyIframe)
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(TiptapVuetifyPlugin)

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if(to.name == null){
    getShop.get(
      data => {
        if(data.setup) {
          next({ name: 'emailCustomize'});
        }
        else {
          next({ name: 'plans'})
        }
      });
  }
  else {
    next();
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    vuetify: new Vuetify(),
    router,
    store,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

最后是我的 package.json 文件

{
  "name": "fresh-credit",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "animate.css": "^3.7.2",
    "axios": "^0.19.0",
    "babel-preset-stage-2": "^6.24.1",
    "chart.js": "^2.8.0",
    "lodash": "^4.17.15",
    "postcss-loader": "^3.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "tiptap-extensions": "^1.28.6",
    "tiptap-vuetify": "^2.13.2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-breadcrumbs": "^1.2.0",
    "vue-chartist": "^2.2.1",
    "vue-chartjs": "^3.4.2",
    "vue-click-outside": "^1.0.7",
    "vue-friendly-iframe": "^0.17.0",
    "vue-loader": "^15.7.1",
    "vue-router": "^3.1.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify": "^2.0.18",
    "vuex": "^3.1.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "deepmerge": "^4.2.2",
    "fibers": "^4.0.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.1.0"
  }
}

似乎没有任何效果。我什至查看了错误中提到的那些文件，看起来这不是问题的根源。但为了完整起见，这里是文件 _theme.sass

@mixin theme ($component)
  .theme--light.#{$component}
    @content($material-light)
  .theme--dark.#{$component}
    @content($material-dark)

Answer 1

将此添加到您的 Webpack.config.js 规则中，并根据您使用的 sass-loader 版本指定选项

{
    test: /\.s(c|a)ss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        // Requires sass-loader@^7.0.0
        options: {
          implementation: require('sass'),
          fiber: require('fibers'),
          indentedSyntax: true // optional
        },
        // Requires sass-loader@^8.0.0
        options: {
          implementation: require('sass'),
          sassOptions: {
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
        },
      },
    ],
  },

并确保您在 package.json 中使用 sass 而不是 node-sass。根据我的经验，我发现如果你以前安装过 node-sass，你可能想要删除节点模块并重新运行 npm install

您可能还想安装 vue-style-loader 和 css-loader，因为我在您的 package.json

中没有看到它们

可以在这些链接中找到更多信息

Tiptap for Vuetify SassError: SassError: Invalid CSS

Tiptap for Vuetify SassError: SassError: Invalid CSS

vuetify.js

tiptap