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

examples: Add an example for the next-css plugin (#3739)

- with css modules
- with additional webpack config
- with post css
- without css modules

Fix #3699
This commit is contained in:
Ari Leo Frankel 2018-02-16 03:59:11 -06:00 committed by Tim Neutkens
parent 48e6decc2d
commit 7b975d2156
6 changed files with 124 additions and 0 deletions

View file

@ -0,0 +1,40 @@
[![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-css)
# next-css example
## How to use
### Using `create-next-app`
Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
```
npm i -g create-next-app
create-next-app --example with-next-css with-next-css-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-css
cd with-next-css
```
Install it and run:
```bash
npm install
npm run 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-css plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-css) It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-css plugin.

View file

@ -0,0 +1,16 @@
const withCSS = require('@zeit/next-css')
/* Without CSS Modules, with PostCSS */
module.exports = withCSS()
/* With CSS Modules */
// module.exports = withCSS({ cssModules: true })
/* With additional configuration on top of CSS Modules */
/*
module.exports = withCSS({
cssModules: true,
webpack: function (config) {
return config;
}
});
*/

View file

@ -0,0 +1,16 @@
{
"name": "with-css-modules",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@zeit/next-css": "0.0.7",
"next": "5.0.0",
"react": "16.2.0",
"react-dom": "16.2.0"
}
}

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

View file

@ -0,0 +1,13 @@
/* Without CSS Modules, maybe with PostCSS */
import '../style.css'
export default () => <div className='example'>O Hai world!</div>
/* With CSS Modules */
/*
import css from "../style.css"
export default () => <div className={css.example}>Hello World, I am being styled using CSS Modules!</div>
*/

View file

@ -0,0 +1,16 @@
.example {
font-size: 50px;
color: papayawhip;
}
/* Post-CSS */
/*
:root {
--some-color: red;
}
.example {
color: var(--some-color);
}
*/