Попытка интеграции Ant Design с использованием Sass и next.config. js не работает - PullRequest
Новая
       40

Попытка интеграции Ant Design с использованием Sass и next.config. js не работает

1 голос
/ 20 января 2020

Я пытаюсь заставить Ant Design работать с использованием Sass. Мы работаем с Sass в разных проектах, поэтому важно придерживаться этого, а не Меньше.
Он работает над проектами, использующими CRA, путем редактирования конфигурации веб-пакета по этой ссылке (в основном это позволяет вам импортировать .s css файл с переменными в файл Less, который изменяет стиль Ant Design):

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

Однако та же конфигурация не работает в 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*

1 Ответ

0 голосов
/ 09 апреля 2020

Это наш конфиг, который, кажется, работает. 

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