Fullcalendar 下一个Js-完整日历包括CSS

我正在尝试使用fullCalendar library（）显示基于事件的日历。当我运行代码时，我得到以下错误

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }

下面是我的next-config.js

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');
const optimizedImages = require('next-optimized-images');
const dotenv = require('dotenv');
const Dotenv = require('dotenv-webpack');
const path = require('path');
const { assetPrefix } = require('./site-config');
const withTM = require('next-transpile-modules')([
  '@fullcalendar'
]);

dotenv.config();

const nextConfig = {
  assetPrefix,
  // exportTrailingSlash: true is required to ensure all files reside in the /assetPrefix folder
  exportTrailingSlash: false,
  env: {
    BRANCH: process.env.BRANCH,
    
  },
  webpack: (config) => {
    // eslint-disable-next-line no-param-reassign
    config.plugins = config.plugins || [];

    // eslint-disable-next-line no-param-reassign
    config.node = {
      fs: 'empty',
    };

    // eslint-disable-next-line no-param-reassign
    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    ];
   

    return config;
  },
};

const sassOptions = {
  sassLoaderOptions: {
    outputStyle: 'compressed',
  },
};

// eslint-disable-next-line no-console
// console.log('Building this path map:', pathMap);

module.exports = withPlugins([[withSass, sassOptions], [optimizedImages], [withFonts]], nextConfig),withTM();

我还将css文件包括在_app.jsx中，如下所示

import '@fullcalendar/common/main.css';
import '@fullcalendar/daygrid/main.css';

我错过了什么？有人能帮我吗

提前谢谢