Unable to configure react-flexbox-grid with next-sass

[hansiemithun]

I tried several links to configure and modify, finally with all the directions followed, my next.config.js looks as below:

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {};
  require.extensions['.scss'] = () => {};
  require.extensions['.css'] = file => {};
}

const optimizedImages = require('next-optimized-images');
const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const webpack = require('webpack');

module.exports = {
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    };

    return config;
  }
};

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]-[name]-[hash:base64:5]'
  }
};

const optimizedImagesConfig = {
  inlineImageLimit: 8192,
  imagesFolder: 'images',
  imagesName: '[name]-[hash].[ext]',
  optimizeImagesInDev: false,
  mozjpeg: {
    quality: 80
  },
  optipng: {
    optimizationLevel: 3
  },
  pngquant: false,
  gifsicle: {
    interlaced: true,
    optimizationLevel: 3
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: 'default',
    quality: 75
  }
};

const nextConfiguration = {
  webpack: config => {
    config.plugins.push(
      new webpack.DefinePlugin({
        PC: JSON.stringify('pc')
      })
    );
    return config;
  }
};

module.exports = withPlugins(
  [[withSass, sassConfig], [optimizedImages, optimizedImagesConfig]],
  nextConfiguration
);

I receive error as:

Failed to compile
./node_modules/flexboxgrid2/flexboxgrid2.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .container {
|   box-sizing: border-box;
|   margin-left: auto;
This error occurred during the build time and cannot be dismissed.

My package.json is as below:

{
  "name": "create-next-example-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^6.0.0",
    "imagemin-svgo": "^7.0.0",
    "jimp": "^0.6.0",
    "lqip-loader": "^2.2.0",
    "next": "^7.0.2",
    "next-compose-plugins": "^2.1.1",
    "next-optimized-images": "^2.3.1",
    "node-sass": "^4.11.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-flexbox-grid": "^2.1.2",
    "responsive-loader": "^1.2.0",
    "svg-sprite-loader": "^4.1.3",
    "webp-loader": "^0.4.0"
  }
}

Please help what am i missing to configure or the right approach?

[timneutkens]

Sounds like you need to add @zeit/next-css too

[hansiemithun]

Thanks for the reply @timneutkens, but I still face the issue even after having next-css:

Failed to compile
./node_modules/flexboxgrid2/flexboxgrid2.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .container {
|   box-sizing: border-box;
|   margin-left: auto;