diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index 60ef149c54ac7..4df3a58463dd8 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 `
`. [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 0000000000000..2a478662183d3
--- /dev/null
+++ b/examples/with-next-sass/components/hello-world.js
@@ -0,0 +1,7 @@
+import styles from './hello-world.module.scss'
+
+export default () => (
+
+ Hello World, I am being styled using SCSS Modules!
+
+)
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 0000000000000..5b1000dcd9c61
--- /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 ed73b1374f1bd..0000000000000
--- 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 da5a8dcd941d7..3511b5b825603 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 0000000000000..569ae43d200da
--- /dev/null
+++ b/examples/with-next-sass/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles.scss'
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js
index bfb3f3abf7c54..55d4550097ccb 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 () =>
Hello World!
+export default () => (
+
+
+
+)
diff --git a/examples/with-next-sass/styles.scss b/examples/with-next-sass/styles.scss
new file mode 100644
index 0000000000000..f1a1f1957ed9b
--- /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 73cc2e0e844ba..0000000000000
--- a/examples/with-next-sass/styles/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$color: #2ecc71;
-.example {
- background-color: $color;
-}