next-pre-css

Adds support for both Stylus & Less CSS pre-processing in NextJS v10+.

Step 1 - Install next-pre-css & Your Choice of Flavor

for Stylus?

Install both Stylus and the Stylus loader for Webpack:

$ npm i -D stylus stylus-loader next-pre-css

NOTE: Stylus-Loader v5 drops support for Webpack 4 (which is the default for NextJS v10) You can opt-in to Webpack5 as noted both on this page as well as the example illustrated below. If, however, you wish to stay on Webpack 4 - then you'll need Stylus-Loader v4:

$ npm i -D stylus-loader^4.3.3

for Less?

Install both Less and the Less loader for Webpack:

$ npm i -D less less-loader next-pre-css

Step 2 - Setup your NextJS Config

If you don't already have a NextJS Config, create one.

touch next.config.js

In the config, require() the next-pre-css module and wrap your config with it as follows.

const addSupport = require('next-pre-css')

module.exports = addSupport({

  /* To opt-in to using Webpack5 in NextJS */
  future: { webpack5: true },
	 
  webpack: (config, options) => {
	
    /* ...and the rest of your custom webpack config goes here. */
		
    return config;
  },
})

As an extra example; adding GraphQL and the GraphQL-Tag loader (because why not?):

const addSupport = require('next-pre-css')

module.exports = addSupport({
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    })
    return config
  },
  webpackDevMiddleware: (config) => {
    return config
  },
})

Step 3 - Um... Do Your Thing.

Begin working w/ the same pleasentries that NextJS provides Sass with (such as component-level styling like: mah-css.module.styl or mah-css.module.less, but for the pre-processor that you prefer. Under-the-hood, this module does little more than modify the webpack rules NextJS sets for Sass & CSS to include both Stylus and Less. So that's it.

Hence forth, Go Nuts!