FullCalendar Vue - Webpack bundling error on /node_modules/@fullcalendar/common/main.css

Question

I am attempting to use @fullcalendar/vue3 along with webpack to bundle an example calendar -- but my webpack bundler is failing when it comes across the css file, saying unexpected token. I assume i would need a proper loader for the css, but I am not sure how it should be.

App.vue component

<template>
  <div>
    <FullCalendar/>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue3';

export default {
  components: {
    FullCalendar
  }
}
</script>

webpack.config.js rules section

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

I finally figured it out shortly after asking this question. The solution was to add a rule specific to .css files, which I just did the following:

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