https://github.com/itibbers/next-with-stylus

Next.js + Stylus support
https://github.com/itibbers/next-with-stylus

next-plugin nextjs stylus

Last synced: about 2 months ago
JSON representation

Next.js + Stylus support

• Host: GitHub
• URL: https://github.com/itibbers/next-with-stylus
• Owner: itibbers
• License: mit
• Created: 2021-11-04T06:48:04.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-07-25T12:53:41.000Z (over 2 years ago)
• Last Synced: 2024-09-19T14:47:58.113Z (3 months ago)
• Topics: next-plugin, nextjs, stylus
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# next-with-stylus

> Forked from [next-with-less](https://github.com/elado/next-with-less).

[Next.js](https://nextjs.org/) + [Stylus CSS](https://www.stylus.com/) Support

Next.js supports SASS/SCSS, but not stylus. This plugin adds stylus support by duplicating SASS webpack rules and adding support for `.styl` files with `stylus-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 `[email protected]` (with webpack5), `[email protected]`.

## Install

```sh

yarn add next-with-stylus

npm i next-with-stylus

```

Peer dependencies to install: `stylus` `stylus-loader`.

## Usage

```js

// next.config.js

const withStylus = require('next-with-stylus')

module.exports = withStylus({

  stylusLoaderOptions: {

    /* ... */

  },

})

```

You can see all the options available to `stylus-loader` [here](https://webpack.js.org/loaders/stylus-loader/#options).

### Usage with [`next-compose-plugins`](https://github.com/cyrilwanner/next-compose-plugins)

```js

// next.config.js

const withPlugins = require('next-compose-plugins')

const withStylus = require('next-with-stylus')

const plugins = [

  /* ...other plugins... */

  [

    withStylus,

    {

      stylusLoaderOptions: {

        /* ... */

      },

    },

  ],

  /* ...other plugins... */

]

module.exports = withPlugins(plugins, {

  /* ... */

})

```