How to use Sass and Css on Next Js

I've been trying to use sass and css modules in my next.config.js, but keep running into this error:

Failed to compile.

./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css
Unknown word (1:1)

> 1 | var api = require("!../../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../../../../../css-loader/index.js!./index.css");
  3 | 
  4 |             content = content.__esModule ? content.default : content;

After reading around on github and stackoverflow it sounds like its because I have two instances of css modules configurations in my next.config.js, but I'm unsure how to reduce that to one while still keeping this logic in tact:

      config.module.rules.push({
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      });

Below is my full next.config.js

const path = require('path');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

const aliasPathsToResolve = [
  {
    name: 'react-ui',
    path: path.resolve(__dirname, './node_modules/@riskalyze/react-ui/')
  },
  {
    name: '@babel/runtime-corejs2',
    path: path.resolve(__dirname, './node_modules/@babel/runtime-corejs2/')
  }
];

module.exports = withCSS(
  withSass({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    },
    webpack: (config, { defaultLoaders }) => {
      config.module.rules.push({
        test: /\.+(js|jsx|ts|tsx)$/,
        loader: defaultLoaders.babel,
        include: /react-ui/
      });

      config.module.rules.push({
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      });

      aliasPathsToResolve.forEach(module => {
        config.resolve.alias[module.name] = module.path;
      });

      return config;
    }
  })
);