next.config.js which enables built-in css and sass support with "includePaths" option

next.config.js

const path = require("path");
const withImages = require("next-images");

let config = {
  distDir: "../../dist/client",
  experimental: {
    css: true,
    scss: true
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // add includePaths to Sass loaders
    const sassLoaders = findLoaders(
      config.module.rules,
      x => x.loader && x.loader.indexOf("/sass-loader/") !== -1
    );

    const sassIncludePaths = [path.join(__dirname, "./styles")];
    for (let i = 0; i < sassLoaders.length; i++) {
      sassLoaders[i].options.sassOptions = {
        includePaths: sassIncludePaths
      };
    }

    return config;
  }
};

config = withImages(config);

module.exports = config;

function findLoaders(rules, fn, matches = []) {
  for (let i = 0; i < rules.length; i++) {
    const loaders = rules[i].use || [];
    for (let j = 0; j < loaders.length; j++) {
      if (fn(loaders[j])) {
        matches.push(loaders[j]);
      }
    }

    if (!Array.isArray(rules[i].oneOf)) {
      continue;
    }

    findLoaders(rules[i].oneOf, fn, matches);
  }

  return matches;
}