title: Trying to integrate Ant Design using Sass and next.config.js not working
body: <p>I am trying to get Ant Design to work using Sass.  We work with Sass across projects so it's important to stick with this and not Less.<br>
  I have it working on projects that use CRA, by editing webpack config as per this link (it basically allows you to import .scss file with variables into a Less file which changes the styling of Ant Design):</p>
  
  <p><a href="https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7" rel="nofollow noreferrer">https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7</a></p>
  
  <p>However the same config is not working in Next and throwing errors.</p>
  
  <p>My next.config file is as follows:</p>
  
  <pre><code>const withLess = require("@zeit/next-less");
  const withSass = require("@zeit/next-sass");
  const withCss = require("@zeit/next-css");
  const withPlugins = require("next-compose-plugins");
  const withImages = require("next-images");
  
  
  const nextConfig = {
    lessLoaderOptions: {
      javascriptEnabled: true
    },
    webpack: (config, { isServer }) =&gt; {
        config.module.rules.push(
          {
            test: /\.less$/,
            use: [
              { loader: "style-loader" },
              { loader: "css-loader" },
              {
                loader: "less-loader",
                options: {
                  javascriptEnabled: true
                }
              }
            ]
          },
          {
            test: /\.scss$/,
            issuer: {
              exclude: /\.less$/
            }
          },
          {
            test: /\.scss$/,
            issuer: /\.less$/,
            use: {
              loader: "./sassVarsToLess.js"
            }
          }
        );
  
      return config;
    }
  };
  
  module.exports = withPlugins(
    [withImages, withSass, withLess, withCss],
    nextConfig
  );
  </code></pre>
  
  <p><strong>sassVarsToLess.js</strong></p>
  
  <pre><code>module.exports = function(source) {
    return source.replace(/\$/gi, "@");
  };
  </code></pre>
  
  <p>I am getting this returned in console when running <code>yarn dev</code></p>
  
  <pre><code>Error: Didn't get a result from child compiler
  
  Error: Cannot find module '/Users/mattprice/Sites/fbp-next/.next/build-manifest.json'
  Require stack:
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/load-components.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/api-utils.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/server/next.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/server/lib/start-server.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/cli/next-dev.js
  - /Users/mattprice/Sites/fbp-next/node_modules/next/dist/bin/next
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:973:15)
      at Function.Module._load (internal/modules/cjs/loader.js:855:27)
      at Module.require (internal/modules/cjs/loader.js:1033:19)
      at require (internal/modules/cjs/helpers.js:72:18)
      at Object.loadComponents (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/load-components.js:27:9)
      at DevServer.findPageComponents (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js:514:40)
      at DevServer.renderErrorToHTML (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js:652:35)
      at DevServer.renderErrorToHTML (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/server/next-dev-server.js:14:725)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at async DevServer.render (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js:495:22)
      at async Object.fn (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js:355:17)
      at async Router.execute (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/router.js:42:32)
      at async DevServer.run (/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js:468:29) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/load-components.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/api-utils.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/next-server/server/next-server.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/server/next.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/server/lib/start-server.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/cli/next-dev.js',
      '/Users/mattprice/Sites/fbp-next/node_modules/next/dist/bin/next'
    ]
  }
  </code></pre>
  
  <p>My index.less file is as follows:</p>
  
  <pre><code>@import "~antd/dist/antd.less";
  @import "./variables.scss";  *this includes my Sass variables*
  </code></pre>