svelte-draft icon indicating copy to clipboard operation
svelte-draft copied to clipboard

Scss and Styled components

Open tezine opened this issue 4 years ago • 2 comments

Hi, Congratulations for this project! It's amazing! It's the coolest project I found this year! I wonder if it's already possible to import Scss files similar to React?

App.tsx

import styles from './App.module.scss'
export default function App() {
    <p>This is a paragraph.</p>
    <p class={styles.myParagraph}>Another paragraph</p>
}

App.module.scss

.myParagraph{
    color:blue
}

Or to use styled-components like this:

import styled from "styled-components";
const Paragraph = styled.p`
  font-size: 15px;
  text-align: center;
`;

tezine avatar May 20 '20 00:05 tezine

Thanks!

Currently, scss and styled-components are not supported, the only way to use css is to place a .css file along side .tsx file, for example: 9-motion/spring.

In implementation, see create style section, then insert style section.

mistlog avatar May 20 '20 14:05 mistlog

I found that we can use css-in-js in svelte: https://svelte.dev/blog/svelte-css-in-js. So I added a demo in svelte-draft-template, see demo/css-in-js branch.

mistlog avatar Jul 28 '20 14:07 mistlog