Ninja Programmers Mindmeld

    next-with-less

    2.0.5 • Public • Published

    next-with-less

    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 next-with-less
    
    npm i next-with-less

    Peer dependencies to install: less less-loader.

    Usage

    // next.config.js
    const withLess = require("next-with-less");
    
    module.exports = withLess({
      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("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("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.

    Keywords

    none

    Install

    npm i next-with-less

    DownloadsWeekly Downloads

    19,965

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • elado