From 48e6decc2d7e081d87b7c4c4a779d84023484375 Mon Sep 17 00:00:00 2001 From: AlbertGao Date: Fri, 16 Feb 2018 22:51:13 +1300 Subject: [PATCH] Fix #3700 Added examples for next-sass (#3729) * #3700 Add examples for next-sass * #3700 Use React.Fragments and more * Fix #3700 remove some keys to make more clear * Fix #3700, change to without-css-modules * Replace PageWrapper with _document for more concise code. #3700 --- examples/with-next-sass/next.config.js | 2 + examples/with-next-sass/package.json | 14 +++++++ examples/with-next-sass/pages/_document.js | 26 +++++++++++++ examples/with-next-sass/pages/index.js | 6 +++ examples/with-next-sass/readme.md | 43 ++++++++++++++++++++++ examples/with-next-sass/styles/style.scss | 4 ++ 6 files changed, 95 insertions(+) create mode 100644 examples/with-next-sass/next.config.js create mode 100644 examples/with-next-sass/package.json create mode 100644 examples/with-next-sass/pages/_document.js create mode 100644 examples/with-next-sass/pages/index.js create mode 100644 examples/with-next-sass/readme.md create mode 100644 examples/with-next-sass/styles/style.scss diff --git a/examples/with-next-sass/next.config.js b/examples/with-next-sass/next.config.js new file mode 100644 index 00000000..ed73b137 --- /dev/null +++ b/examples/with-next-sass/next.config.js @@ -0,0 +1,2 @@ +const withSass = require('@zeit/next-sass') +module.exports = withSass() diff --git a/examples/with-next-sass/package.json b/examples/with-next-sass/package.json new file mode 100644 index 00000000..c6c7a56f --- /dev/null +++ b/examples/with-next-sass/package.json @@ -0,0 +1,14 @@ +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@zeit/next-sass": "0.0.9", + "next": "^5.0.0", + "node-sass": "^4.7.2", + "react": "^16.2.0", + "react-dom": "^16.2.0" + } +} diff --git a/examples/with-next-sass/pages/_document.js b/examples/with-next-sass/pages/_document.js new file mode 100644 index 00000000..af0f233e --- /dev/null +++ b/examples/with-next-sass/pages/_document.js @@ -0,0 +1,26 @@ +/* +In production the stylesheet is compiled to .next/static/style.css. +The file will be served from /_next/static/style.css +You could include it into the page using either next/head or a custom _document.js. +*/ + +import Document, { Head, Main, NextScript } from 'next/document' + +export default class MyDocument extends Document { + render () { + return ( + + + + + +
+ + + + ) + } +} diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js new file mode 100644 index 00000000..64f64c0d --- /dev/null +++ b/examples/with-next-sass/pages/index.js @@ -0,0 +1,6 @@ +import '../styles/style.scss' + +export default () => +
+ Hello World! +
diff --git a/examples/with-next-sass/readme.md b/examples/with-next-sass/readme.md new file mode 100644 index 00000000..b17cfe3f --- /dev/null +++ b/examples/with-next-sass/readme.md @@ -0,0 +1,43 @@ +[![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-jest) + +# Example app with next-sass + +## How to use + +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +```bash +npm i -g create-next-app +create-next-app --example with-next-sass with-next-sass-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-sass +cd with-next-sass +``` + +Install it and run: + +```bash +npm install +npm run build +npm run start +``` + +The dev mode is also support via `npm run dev` + +## The idea behind the example + +This example features: + +* An app with next-sass + +This example uses next-sass without css-modules. The config can be found in `next.config.js`, change `withSass()` to `withSass({cssModules: true})` if you use css-modules. Then in the code, you import the stylesheet as `import style '../styles/style.scss'` and use it like `
`. + +[Learn more](https://github.com/zeit/next-plugins/tree/master/packages/next-sass) diff --git a/examples/with-next-sass/styles/style.scss b/examples/with-next-sass/styles/style.scss new file mode 100644 index 00000000..73cc2e0e --- /dev/null +++ b/examples/with-next-sass/styles/style.scss @@ -0,0 +1,4 @@ +$color: #2ecc71; +.example { + background-color: $color; +}