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

Question

我想使用 Next.js with Sass and CSS modules but also want to use Ant Design 并且想为较小的建筑尺寸使用 Less 样式。

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

Answer 1

编辑： 这个答案对于 next.js 的当前版本肯定已经过时了，请查看下面的其他答案。

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

.babelrc（这里没有魔法）

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

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

如何编写 withSass withLess 用法以及如何将 cssModules: true 放入外部对象的最终提示来自此评论 here.

虽然我已经在尝试从之前的示例中派生出的不同组合： 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"
  }
...

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

Answer 2

@zeit/next-less 已弃用并禁用 Next 的内置 CSS 支持。它还使用了非常旧的 less 和 less-loader.

版本

我创建了一个包，它通过复制 SASS 规则并为 Less 文件和 less-loader 设置它们来为 Next.js 注入 Less 支持。它适用于 webpack5 标志。

https://github.com/elado/next-with-less

https://www.npmjs.com/package/next-with-less

Answer 3

虽然上述答案可能适用于低于 11 的 NextJS 版本，但不适用于 11+。我发现以下插件非常成功...

https://github.com/SolidZORO/next-plugin-antd-less

Answer 4

我正在使用 elado 的软件包，它是 - https://github.com/elado/next-with-less

您将需要 less 和 less-loader 作为依赖项。之后在 styles 文件夹中创建一个 global.less 文件。所以就像 root> style > global.less 并粘贴此代码

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; 
@primary-color: #ff9b18; 
@border-radius-base: 20px;

并在您将在根文件夹中创建的 next.config.js 文件中添加以下代码。

   // next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
    lessLoaderOptions: {
        /* ... */
    },
});

Answer 5

在我们的项目中，有旧的 scss 和 css 文件。他们没有为 CSS 模块使用 Next js 指南。所以我不得不覆盖 webpack.config.js。所以效果很好。但是当我们将文件移动到 monorepo 共享包时，babel 并没有转译它们。我使用了下面的东西，但是那些没有 .module 扩展名的 SCSS 模块不起作用。

下一个传输模块。
实验性：{ externalDir: true, } 在下一个 Js 配置中使用 root babel.cofig.json

最终符号链接破解对外部共享文件起作用

通过更新 next.config.js

为共享文件夹使用符号链接

module.exports = {
  //...
  resolve: {
    symlinks: false,
  },
};

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

How to configure Next.js with Antd / Less and Sass / CSS modules

sass

less

css-modules

next.js

antd