From 6997b0236b68fd7c8f5395003c99a719974cc404 Mon Sep 17 00:00:00 2001
From: Sarbast Mohammed <sarbast2030@gmail.com>
Date: Fri, 13 Mar 2020 04:42:21 +0100
Subject: [PATCH] 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                         | 2 +-
 examples/with-next-sass/components/hello-world.js         | 7 +++++++
 .../with-next-sass/components/hello-world.module.scss     | 5 +++++
 examples/with-next-sass/next.config.js                    | 2 --
 examples/with-next-sass/package.json                      | 5 ++---
 examples/with-next-sass/pages/_app.js                     | 7 +++++++
 examples/with-next-sass/pages/index.js                    | 8 ++++++--
 examples/with-next-sass/styles.scss                       | 5 +++++
 examples/with-next-sass/styles/style.scss                 | 4 ----
 9 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 examples/with-next-sass/components/hello-world.js
 create mode 100644 examples/with-next-sass/components/hello-world.module.scss
 delete mode 100644 examples/with-next-sass/next.config.js
 create mode 100644 examples/with-next-sass/pages/_app.js
 create mode 100644 examples/with-next-sass/styles.scss
 delete mode 100644 examples/with-next-sass/styles/style.scss

diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index 60ef149c54..4df3a58463 100644
--- a/examples/with-next-sass/README.md
+++ b/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
 
diff --git a/examples/with-next-sass/components/hello-world.js b/examples/with-next-sass/components/hello-world.js
new file mode 100644
index 0000000000..2a47866218
--- /dev/null
+++ b/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>
+)
diff --git a/examples/with-next-sass/components/hello-world.module.scss b/examples/with-next-sass/components/hello-world.module.scss
new file mode 100644
index 0000000000..5b1000dcd9
--- /dev/null
+++ b/examples/with-next-sass/components/hello-world.module.scss
@@ -0,0 +1,5 @@
+$color: red;
+
+.hello {
+  color: $color;
+}
diff --git a/examples/with-next-sass/next.config.js b/examples/with-next-sass/next.config.js
deleted file mode 100644
index ed73b1374f..0000000000
--- a/examples/with-next-sass/next.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-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
index da5a8dcd94..3511b5b825 100644
--- a/examples/with-next-sass/package.json
+++ b/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"
   }
 }
diff --git a/examples/with-next-sass/pages/_app.js b/examples/with-next-sass/pages/_app.js
new file mode 100644
index 0000000000..569ae43d20
--- /dev/null
+++ b/examples/with-next-sass/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles.scss'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js
index bfb3f3abf7..55d4550097 100644
--- a/examples/with-next-sass/pages/index.js
+++ b/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>
+)
diff --git a/examples/with-next-sass/styles.scss b/examples/with-next-sass/styles.scss
new file mode 100644
index 0000000000..f1a1f1957e
--- /dev/null
+++ b/examples/with-next-sass/styles.scss
@@ -0,0 +1,5 @@
+$backgroundColor: #2ecc71;
+
+.app {
+  background-color: $backgroundColor;
+}
diff --git a/examples/with-next-sass/styles/style.scss b/examples/with-next-sass/styles/style.scss
deleted file mode 100644
index 73cc2e0e84..0000000000
--- a/examples/with-next-sass/styles/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color: #2ecc71;
-.example {
-  background-color: $color;
-}
-- 
GitLab