FullCalendar Vue-/nod_module/@FullCalendar/common/main.css上的

Question

我正试图将@fullcalendar/vue3与webpack一起使用来绑定一个示例日历，但我的webpack绑定器在遇到css文件时失败了，说是意外的令牌。我想我需要一个合适的css加载程序，但我不确定它应该如何。

App.vue组件

<template>
<div>
<FullCalendar/>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue3';
export default {
components: {
FullCalendar
}
}
</script>

webpack.config.jsrules部分

rules: [
{
test   : /.vue$/,
exclude: /node_modules/,
use    : 'vue-loader'
},
{
test: /.scss$/,
use : [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: {url: false, sourceMap: argv.mode === 'development'}},
{loader: 'postcss-loader', options: {sourceMap: argv.mode === 'development'}},
{loader: 'sass-loader', options: {sourceMap: argv.mode === 'development'}}
]
},
{
test   : /.js$/,
exclude: /node_modules/,
use    : {
loader: 'babel-loader'
}
}
]

Answer 1

在问了这个问题后不久，我终于明白了。解决方案是添加一个特定于.css文件的规则，我只做了以下操作：

{
test: /.css$/,
use : [
{loader: MiniCssExtractPlugin.loader},
{loader: 'css-loader', options: {importLoaders: 1}}
]
}