Update next-sass example to use built-in sass support (#11015)

* update next-sass example to use built-in sass support

* Update README.md

Co-authored-by: Joe Haddad <joe.haddad@zeit.co>

examples/with-next-sass/README.md

@@ -1,6 +1,6 @@
 # Example 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 from '../styles/style.scss'` and use it like `<div className={style.example}>`. [Learn more](https://github.com/zeit/next-plugins/tree/master/packages/next-sass).
+This example demonstrates how to use Next.js' built-in Global Sass/Scss imports and Component-Level Sass/Scss modules support.
 
 ## Deploy your own
 

examples/with-next-sass/components/hello-world.js

@@ -0,0 +1,7 @@
+import styles from './hello-world.module.scss'
+
+export default () => (
+  <div className={styles.hello}>
+    Hello World, I am being styled using SCSS Modules!
+  </div>
+)

examples/with-next-sass/components/hello-world.module.scss

@@ -0,0 +1,5 @@
+$color: red;
+
+.hello {
+  color: $color;
+}

examples/with-next-sass/next.config.js

@@ -1,2 +0,0 @@
-const withSass = require('@zeit/next-sass')
-module.exports = withSass()

examples/with-next-sass/package.json

@@ -5,10 +5,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@zeit/next-sass": "^1.0.0",
     "next": "latest",
-    "node-sass": "4.7.2",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react-dom": "^16.7.0",
+    "sass": "1.26.3"
   }
 }

examples/with-next-sass/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles.scss'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-next-sass/pages/index.js

@@ -1,3 +1,7 @@
-import '../styles/style.scss'
+import HelloWorld from '../components/hello-world'
 
-export default () => <div className="example">Hello World!</div>
+export default () => (
+  <div className="app">
+    <HelloWorld />
+  </div>
+)

examples/with-next-sass/styles.scss

@@ -0,0 +1,5 @@
+$backgroundColor: #2ecc71;
+
+.app {
+  background-color: $backgroundColor;
+}

examples/with-next-sass/styles/style.scss

@@ -1,4 +0,0 @@
-$color: #2ecc71;
-.example {
-  background-color: $color;
-}