@juln/next-with-less

从 next-with-less 中fork并增强了一些功能

Next.js + Less CSS Support

Next.js supports SASS/SCSS, but not Less. This plugin adds Less support by duplicating SASS webpack rules and adding support for .less files with less-loader. It mimics the exact behavior of CSS extraction/css-modules/errors/client/server of SASS.

⚠️ Use with caution - Next.js implementation can chance in any version, and the monkey patching may not work anymore.

Tested with next@11.0.1 (with webpack5), next@12.0.7, and antd@4.15.x.

Install

yarn add @juln/next-with-less

npm i @juln/next-with-less

Peer dependencies to install: less less-loader.

Usage

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

module.exports = withLess({
  // 加在less-loader后面的loader
  prependRules: [
    {
      loader: 'style-resources-loader',
      options: {
        patterns: [
          path.resolve(__dirname,'./styles/common.less'),
        ],
      },
    },
    // ...
  ],
  lessLoaderOptions: {
    /* ... */
  },
});

You can see all the options available to less-loader here.

Usage with next-compose-plugins

// next.config.js
const withPlugins = require("next-compose-plugins");

const withLess = require("@juln/next-with-less");

const plugins = [
  /* ...other plugins... */
  [withLess, {
    lessLoaderOptions: {
      /* ... */
    },
  }],
  /* ...other plugins... */
];

module.exports = withPlugins(plugins, {
  /* ... */
});

Customize antd theme

To override some of antd default variables, just add them under lessLoaderOptions.lessOptions.modifyVars:

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

module.exports = withLess({
  lessLoaderOptions: {
    /* ... */
    lessOptions: {
      /* ... */
      modifyVars: {
        "primary-color": "#9900FF",
        "border-radius-base": "2px",
        /* ... */
      },
    },
  },
});

As an alternative, the same can be achieved using the additionalData option. Put your variables in a file, like:

@primary-color: #9900ff;
@border-radius-base: 2px;

and then pass it to less-loader using additionalData:

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

const pathToLessFileWithVariables = path.resolve(
  "your-file-with-antd-variables.less"
);

module.exports = withLess({
  lessLoaderOptions: {
    /* ... */
    additionalData: (content) =>
      `${content}\n\n@import '${pathToLessFileWithVariables}';`,
  },
});

---

There's an existing PR trying to add built in Less support for Next, but currently it's not likely to be merged.