search

mistlog / svelte-draft

Develop svelte app in typedraft/typescript
https://mistlog.github.io/svelte-draft-docs
MIT License
36 stars 1 forks source link

Scss and Styled components #8

Open tezine opened 4 years ago

tezine commented 4 years ago

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;
`;
mistlog commented 4 years ago

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 commented 4 years ago

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.