next.config.js for importing external css files, images and fonts. Easily modified for supporting SASS/LESS. Also includes some production optimizations (services workers, css purging)

next.config.js

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const path = require('path');
const withOffline = require('next-offline');
const withCSS = require('@zeit/next-css');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const withPurgeCss = require('next-purgecss');

const {
  PHASE_PRODUCTION_BUILD,
} = require('next/constants');

// withCSS config
const cssConfig = {
  cssModules: false,
  importLoaders: 1,
  cssLoaderOptions: {
    localIdentName: '[path]___[local]___[hash:base64:5]',
  },
  [PHASE_PRODUCTION_BUILD]: {
    cssLoaderOptions: {
      localIdentName: '[hash:base64:8]',
    },
  },
};

// purgecss config, only used in production.
const purgeCssConfig = {
  purgeCssEnabled: ({dev}) => !dev,
};

// nextconfig with aliases, fonts, production optimization support,
const nextConfig = {
  trailingSlash: false,
  poweredByHeader: false,
  webpack(config, options) {
    const {isServer} = options;

    // aliases for main project folders. When using vscode edit jsconfig.json accordingly for awesome linting experience
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve('./components'),
      '@public': path.resolve('./public'),
      '@redux': path.resolve('./redux'),
      '@utils': path.resolve('./utils'),
    };

    // support font import usually inside css files
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: require.resolve('file-loader'),
          options: {
            name: '[name]-[hash:8].[ext]',
            publicPath: (url) => {
              return `/_next/static/css/${url}`;
            },
            outputPath: `${isServer ? '../' : ''}static/css/`,
            esModule: false,
          },
        },
      ],
    });

    // minify css in production
    if (config.mode === 'production') {
      if (Array.isArray(config.optimization.minimizer)) {
        config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
      }
    }

    return config;
  },
};

module.exports = withPlugins(
  [
    withOffline,
    [withCSS, cssConfig],
    withImages,
    [withPurgeCss, purgeCssConfig],
  ],
  nextConfig,
);

hey, i'm just a rookie, i'm getting an import error to my css file webpack. can you help?