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

Question

我正在尝试使用 Sass 让 Ant Design 工作。我们与 Sass 跨项目合作，因此坚持这一点而不是 Less 很重要。
我让它在使用 CRA 的项目上工作，通过按照这个 link 编辑 webpack 配置（它基本上允许你将带有变量的 .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*

Answer 1

这是我们似乎有效的配置。

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

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

Trying to integrate Ant Design using Sass and next.config.js not working

sass

less

webpack

next.js

antd