Webpack 尝试使用Sass和next.config.js集成Ant设计不起作用

我正在尝试让Ant设计使用Sass工作。我们在各个项目中都与Sass合作，因此坚持这一点非常重要。
我让它在使用CRA的项目上工作，根据此链接编辑webpack配置（它基本上允许您将带有变量的.scss文件导入一个较少的文件，从而更改Ant Design的样式）：

但是，同一配置在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
);

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

sassVarsToLess.js

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

当运行

Thread 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文件如下所示：

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
);

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

---

这是我们的配置，似乎工作

const withLess = require("@zeit/next-less");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");
const lessToJS = require("less-vars-to-js");
var fs = require("fs");
const path = require("path");

const variables = "./assets/styles/variables.scss";
const antVars = fs.readFileSync(variables, "utf8");
const sass = antVars.replace(/\$/gi, "@");
const sassVars = lessToJS(sass);

const nextConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    importLoaders: true,
    modifyVars: sassVars
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }

    config.resolve.alias["utils"] = path.join(__dirname, "utils");
    config.resolve.alias["store"] = path.join(__dirname, "redux");
    config.resolve.alias["components"] = path.join(__dirname, "components");
    config.resolve.alias["containers"] = path.join(__dirname, "containers");
    return config;
  }
};

module.exports = withPlugins(
  [withSass, withImages, withLess, withCss],
  nextConfig
);

---

这是我们的配置，似乎工作

const withLess = require("@zeit/next-less");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");
const lessToJS = require("less-vars-to-js");
var fs = require("fs");
const path = require("path");

const variables = "./assets/styles/variables.scss";
const antVars = fs.readFileSync(variables, "utf8");
const sass = antVars.replace(/\$/gi, "@");
const sassVars = lessToJS(sass);

const nextConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    importLoaders: true,
    modifyVars: sassVars
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }

    config.resolve.alias["utils"] = path.join(__dirname, "utils");
    config.resolve.alias["store"] = path.join(__dirname, "redux");
    config.resolve.alias["components"] = path.join(__dirname, "components");
    config.resolve.alias["containers"] = path.join(__dirname, "containers");
    return config;
  }
};

module.exports = withPlugins(
  [withSass, withImages, withLess, withCss],
  nextConfig
);

---

你有没有找到解决这个问题的办法？我正为这件事苦苦挣扎。你有没有找到解决办法？我太纠结于此了。