Nextjs如何添加antd答案

【问题标题】：How to add antd to NextjsNextjs如何添加antd
【发布时间】：2020-08-04 17:58:37
【问题描述】：

我基于with-ant-design-less 创建了一个项目，然后尝试将 sass 添加到项目中。我更改了以下文件：

下一个.config.js：

/* eslint-disable */
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[folder]_[local]___[hash:base64:5]",
  },
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
    },
    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",
        });
      }
      return config;
    },
  }),
});

package.json

{
  "name": "with-ant-design-less",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^3.5.4",
    "babel-plugin-import": "^1.7.0",
    "less": "3.0.4",
    "less-vars-to-js": "1.3.0",
    "next": "latest",
    "null-loader": "2.0.0",
    "react": "^16.7.0",
    "sass": "^1.26.3",
    "react-dom": "^16.7.0"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.13.1",
    "typescript": "^3.8.3"
  }
}

但是当我运行该项目时，我收到以下错误：

[ error ] ./pages/index.module.scss
To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.

虽然我正在寻找更好的解决方案来设置项目，因为这样所有样式都将集中在一大块中，这会导致性能问题。

有什么想法吗？谢谢

【问题讨论】：

标签： sass next.js antd

【解决方案1】：

下一个.config.js：

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

const lessThemeVariablesFilePath = './static/ant-theme-variables.less';

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, lessThemeVariablesFilePath), 'utf8'),
);

const lessNextConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables,
  },
  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',
      });
    }
    return config;
  },
};
const sassNextConfig = {
  cssModules: true,
  cssLoaderOptions: {
    localIdentName: '[path]___[local]___[hash:base64:5]',
  },
};

module.exports = withPlugins([
  [withLess, lessNextConfig],
  [withSass, sassNextConfig],
]);

babel 配置：

module.exports = {
  presets: ['next/babel'],
  plugins: [
    ['import', { libraryName: 'antd', style: true }],
  ],
};

我使用 sass、less 和 css。这取决于您的要求。您可以像我一样将自定义变量添加到静态文件中。希望对您有所帮助。

【讨论】：

谢谢，但我发现我只需要安装node-sass 而不是sass
谢谢@SaeedAmin。以上就是我需要做的所有事情，在浪费了数小时的跟踪和错误后发现了这一点。
看起来不错，但是如何添加一个没有模块的全局less/scss文件

【解决方案2】：

所以，对于那些只是为了基本添加而来的人，你可以通过安装antd将antd添加到你的nextjs应用中

npm i antd

然后你可以将 antd 样式添加到你的

_app.js 文件

在你的全局样式之后：

import 'antd/dist/antd.css'

【讨论】：