Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6692252
commit 8cbc0be
Showing
6 changed files
with
113 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-next-less) | ||
|
||
# Example App with next-less | ||
|
||
## How to use | ||
|
||
### Using `create-next-app` | ||
|
||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example with-next-less with-next-less-app | ||
# or | ||
yarn create next-app --example with-next-less with-next-less-app | ||
``` | ||
|
||
### Download manually | ||
|
||
Download the example [or clone the repo](https://github.com/zeit/next.js): | ||
|
||
```bash | ||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-less | ||
cd with-next-less | ||
``` | ||
|
||
Install it and run: | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
# or | ||
yarn | ||
yarn dev | ||
``` | ||
|
||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) | ||
|
||
```bash | ||
now | ||
``` | ||
|
||
## The idea behind the example | ||
|
||
This example demonstrates how to use the [next-less plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-less). | ||
It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-less plugin. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
const withLess = require('@zeit/next-less') | ||
|
||
/* Without CSS Modules, with PostCSS */ | ||
module.exports = withLess() | ||
|
||
/* With CSS Modules */ | ||
// module.exports = withLess({ cssModules: true }) | ||
|
||
/* With additional configuration on top of CSS Modules */ | ||
/* | ||
module.exports = withLess({ | ||
cssModules: true, | ||
webpack: function (config) { | ||
return config; | ||
} | ||
}); | ||
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"scripts": { | ||
"dev": "next", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"@zeit/next-less": "^0.3.0", | ||
"less": "^3.0.4", | ||
"next": "^6.0.3", | ||
"react": "^16.4.0", | ||
"react-dom": "^16.4.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/* | ||
In production the stylesheet is compiled to .next/static/style.css and served from /_next/static/style.css | ||
You have to include it into the page using either next/head or a custom _document.js, as is being done in this file. | ||
*/ | ||
|
||
import Document, { Head, Main, NextScript } from 'next/document' | ||
|
||
export default class MyDocument extends Document { | ||
render () { | ||
return ( | ||
<html> | ||
<Head> | ||
<link rel='stylesheet' href='/_next/static/style.css' /> | ||
</Head> | ||
<body> | ||
<Main /> | ||
<NextScript /> | ||
</body> | ||
</html> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// Without CSS Modules | ||
import '../style.less' | ||
export default () => <div className='example'>Hello Less!</div> | ||
|
||
// With CSS Modules | ||
/* | ||
import style from '../style.less' | ||
export default () => <div className={style.example}>Hello Less!</div> | ||
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
@theme: red; | ||
|
||
.example { | ||
color: @theme; | ||
} |