terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add with-next-less example (#4492)

Browse source
This commit is contained in:
Shu Ding 2018-05-29 16:37:03 +08:00 committed by Tim Neutkens
parent 669225263d
commit 8cbc0be845
6 changed files with 113 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
examples/with-next-less/README.md Normal file
View file

@ -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.

17
examples/with-next-less/next.config.js Normal file
View file

@ -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;
}
});
*/

14
examples/with-next-less/package.json Normal file
View file

@ -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"
}
}

23
examples/with-next-less/pages/_document.js Normal file
View file

@ -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>
)
}
}

9
examples/with-next-less/pages/index.js Normal file
View file

@ -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>
*/

5
examples/with-next-less/style.less Normal file
View file

@ -0,0 +1,5 @@
@theme: red;
.example {
color: @theme;
}