diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md index 9933ca53780694..71d9d7c59e9e01 100644 --- a/docs/basic-features/built-in-css-support.md +++ b/docs/basic-features/built-in-css-support.md @@ -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
diff --git a/errors/install-less.md b/errors/install-less.md new file mode 100644 index 00000000000000..9ff9ce84d026c0 --- /dev/null +++ b/errors/install-less.md @@ -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)