Tiptap for Vuetify SassError: SassError: Invalid CSS

Question

有人在尝试安装Vuefity的所见即所得编辑器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加载程序版本指定选项

{
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 sas，您可能需要删除节点模块并重新运行npm install

你可能还想安装vue风格的加载程序和css加载程序，因为我在你的包.json 中没有看到它们

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

• https://github.com/vuetifyjs/vuetify/issues/7950
• https://vuetifyjs.com/en/introduction/frequently-asked-questions/
• https://github.com/vuetifyjs/vuetify/issues/7323