尝试使用Sass和next.config.js集成Ant Design无效

Question

我正在尝试让Sant使用Ant Design。我们在整个项目中都与Sass合作，因此务必坚持这一点，而不是坚持。我通过按此链接编辑webpack配置，在使用CRA的项目上工作（它基本上允许您将带有变量的.scss文件导入到Less文件中，该文件会更改Ant Design的样式）：

https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7

但是，相同的配置在Next中不起作用，并引发错误。

我的next.config文件如下：

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 }) => {
      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
);

sassVarsToLess.js

module.exports = function(source) {
  return source.replace(/\$/gi, "@");
};

运行yarn dev时，我将在控制台中返回此信息>

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'
  ]
}
我的index.less文件如下：

@import "~antd/dist/antd.less";
@import "./variables.scss";  *this includes my Sass variables*

我正在尝试让Sant使用Ant Design。我们在整个项目中都与Sass合作，因此务必坚持这一点，而不是坚持。我可以通过编辑webpack在使用CRA的项目上工作...

Answer 1

这似乎是我们的配置。