Question

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

next.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.

尽管我正在寻找更好的解决方案来设置项目，因为通过这种方式，所有样式都将占很大一部分，从而导致性能问题。

有什么主意吗？谢谢

Answer 1

next.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。这取决于您的要求。您可以像我一样将自定义变量添加到静态文件中。希望会有所帮助。

Answer 2

因此，对于那些只是为了基本添加而来到这里的人，您可以通过安装 antd 将 antd 添加到您的 nextjs 应用程序中

npm i antd

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

_app.js 文件

在您的全局样式之后：

import 'antd/dist/antd.css'

如何将antd添加到Nextjs

2 个答案: