rsnext/examples/with-storybook-styled-jsx-scss/pages/index.tsx
Justin Philpott 2a4887c30a
New example: /with-storybook-styled-jsx-scss (#18570)
Hi, 

I'm submitting this PR for consideration as a new example app showing Styled JSX with SCSS working inside and outside storybook with example components.

Only known issue: I noticed that when running this example with:

`$ yarn next ./examples/with-storybook-styled-jsx-scss`

I receive the following error:

```
error - ./pages/_app.js
Error: [BABEL] .../next.js/examples/with-storybook-styled-jsx-scss/pages/_app.js: Cannot find module 'styled-jsx-plugin-sass' (While processing: ".../next.js/node_modules/next/babel.js")
```

However I notice that this same missing module error is triggered when running this existing example app "with-styled-jsx-scss".

Any changes/tweaks needed?

Thanks!
2021-01-04 20:46:34 +00:00

35 lines
901 B
TypeScript

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Page } from '../components/Page'
const demoProps = {
user: {},
onLogin: () => {},
onLogout: () => {},
onCreateAccount: () => {},
}
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{/* Including demo props here for example */}
<Page {...demoProps} />
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
}