如何使用 Antd/Less 和 Sass/CSS 模块配置 Next.js

Question

如何使用 Antd/Less 和 Sass/CSS 模块配置 Next.js

Jus*_*tTB 20 sass less css-modules next.js antd

我想将Next.js与 Sass 和 CSS 模块一起使用，但也想使用Ant Design并想使用 Less 样式来缩小建筑尺寸。

我可以启用 CSS 模块或 Less 加载程序，但不能同时启用。Next.js 中的示例并没有帮助我完成这个问题。

Answer 1

Jus*_*tTB 36

经过几个小时的研究，我现在终于找到了正确的解决方案，并想分享它：

.babelrc （这里没有魔法）

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

Run Code Online (Sandbox Code Playgroud)

next.config.js：

/* eslint-disable */
const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
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,
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
      importLoaders: 0
    },
    cssLoaderOptions: {
      importLoaders: 3,
      localIdentName: '[local]___[hash:base64:5]'
    },
    webpack: (config, { isServer }) => {
      //Make Ant styles work with less
      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;
    }
  })
});

Run Code Online (Sandbox Code Playgroud)

最后提示如何编写withSass withLess使用和把cssModules: true外物从该评论是在这里。

虽然我已经在尝试从之前的例子中得出的不同组合： next+ant+less next+sass

为了在这里完成我的依赖项package.json：

...
"dependencies": {
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^4.1.3",
    "babel-plugin-import": "^1.13.0",
    "less": "^3.11.1",
    "less-vars-to-js": "^1.3.0",
    "next": "^9.3.4",
    "node-sass": "^4.13.1",
    "null-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.26.3"
  }
...

Run Code Online (Sandbox Code Playgroud)

我希望这可以帮助其他人更快地找到这个解决方案。:)