rsnext/examples/with-storybook-styled-jsx-scss
Mileta Dulović 3892453cd7
Fixed bug where styled-jsx examples don't work because of a wrong plugin (#23414)
## Bug

Fixes #23293. 

Problem was that `styled-jsx-plugin-sass` was used instead of `@styled-jsx/plugin-sass` so it didn't work. 

You can refer to the issue that is linked for more info.
2021-04-19 19:37:22 +00:00
..
.storybook New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
components New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
pages New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
public New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
stories New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
styles New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
.babelrc Fixed bug where styled-jsx examples don't work because of a wrong plugin (#23414) 2021-04-19 19:37:22 +00:00
.gitignore New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
next-env.d.ts New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00
package.json Fixed bug where styled-jsx examples don't work because of a wrong plugin (#23414) 2021-04-19 19:37:22 +00:00
README.md Include utm_source on example links to vercel.com (#21305) 2021-01-19 07:28:54 +00:00
tsconfig.json New example: /with-storybook-styled-jsx-scss (#18570) 2021-01-04 20:46:34 +00:00

Example app with Storybook setup for SCSS in Styled-jsx

This example shows Styled-jsx (with SCSS) working for components written in TypeScript rendered both inside and outside of Storybook.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app
# or
yarn create next-app --example with-storybook-styled-jsx-scss with-storybook-styled-jsx-scss-app

Run Storybook

npm run storybook
# or
yarn storybook

Build Static Storybook

npm run build-storybook
# or
yarn build-storybook

You can use Vercel to deploy Storybook. Specify storybook-static as the output directory.

Notes

This example combines the following examples, with some required extra config added: