Skip to content

Commit

Permalink
doc: Less support
Browse files Browse the repository at this point in the history
  • Loading branch information
vbudovski committed Mar 18, 2021
1 parent 70b7ab1 commit 473c82a
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 7 deletions.
34 changes: 27 additions & 7 deletions docs/basic-features/built-in-css-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,19 +180,39 @@ module.exports = {
}
```

## Less and Stylus Support
## Less Support

To support importing `.less` or `.styl` files you can use the following plugins:
Next.js allows you to import Less using the `.less` extension. You can use component-level Less via CSS Modules and the
`.module.less` extension.

- [@zeit/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
- [@zeit/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)

If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
Before you can use Next.js' built-in Less support, be sure to install `less`:

```bash
Error: Cannot find module 'less'
npm install less
```

Less support has the same benefits and restrictions as the built-in CSS suport detailed above.

### Customizing Less Options

If you want to configure the Less compiler you can do so by using the `lessOptions` in `next.config.js`.

For example to add `javascriptEnabled`:

```js
module.exports = {
lessOptions: {
javascriptEnabled: true,
},
}
```

## Stylus Support

To support importing `.styl` files you can use the following plugin:

- [@zeit/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)

## CSS-in-JS

<details>
Expand Down
19 changes: 19 additions & 0 deletions errors/install-less.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Install `less` to Use Built-In Less Support

#### Why This Error Occurred

Using Next.js' [built-in Less support](https://nextjs.org/docs/basic-features/built-in-css-support##less-support) requires that you bring your own version of Less.

#### Possible Ways to Fix It

Please install the `less` package in your project.

```bash
npm i less
# or
yarn add less
```

### Useful Links

- [Less Support in Documentation](https://nextjs.org/docs/basic-features/built-in-css-support#less-support)

0 comments on commit 473c82a

Please sign in to comment.