未验证 提交 6997b023 编写于 作者: S Sarbast Mohammed 提交者: GitHub

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: NJoe Haddad <joe.haddad@zeit.co>
上级 9d9496e4
# 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
......
import styles from './hello-world.module.scss'
export default () => (
<div className={styles.hello}>
Hello World, I am being styled using SCSS Modules!
</div>
)
const withSass = require('@zeit/next-sass')
module.exports = withSass()
......@@ -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"
}
}
import '../styles.scss'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
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>
)
$backgroundColor: #2ecc71;
.app {
background-color: $backgroundColor;
}
$color: #2ecc71;
.example {
background-color: $color;
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册