Skip to content

Commit

Permalink
Update next-sass example to use built-in sass support (vercel#11015)
Browse files Browse the repository at this point in the history
* update next-sass example to use built-in sass support

* Update README.md

Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
  • Loading branch information
2 people authored and ScriptedAlchemy committed Mar 17, 2020
1 parent 8728a7d commit bd09749
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 12 deletions.
2 changes: 1 addition & 1 deletion 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

Expand Down
7 changes: 7 additions & 0 deletions 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>
)
5 changes: 5 additions & 0 deletions examples/with-next-sass/components/hello-world.module.scss
@@ -0,0 +1,5 @@
$color: red;

.hello {
color: $color;
}
2 changes: 0 additions & 2 deletions examples/with-next-sass/next.config.js

This file was deleted.

5 changes: 2 additions & 3 deletions examples/with-next-sass/package.json
Expand Up @@ -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"
}
}
7 changes: 7 additions & 0 deletions examples/with-next-sass/pages/_app.js
@@ -0,0 +1,7 @@
import '../styles.scss'

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp
8 changes: 6 additions & 2 deletions 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>
)
5 changes: 5 additions & 0 deletions examples/with-next-sass/styles.scss
@@ -0,0 +1,5 @@
$backgroundColor: #2ecc71;

.app {
background-color: $backgroundColor;
}
4 changes: 0 additions & 4 deletions examples/with-next-sass/styles/style.scss

This file was deleted.

0 comments on commit bd09749

Please sign in to comment.