TIL 2022-08-05 가변폰트, Svelte 한숟가락

가변 폰트

 

가변폰트 이전에는 각 스타일은 다른 폰트 파일로 나눠져 있었음(Font-Bold, Font-Light 등등...)

- 각 파일을 받는데 페이지 렌더링 및 지연 시간

 

가변폰트 있으면 이제 하나의 파일에서 Import하기만 하면 됨 굿

 

 

가변 폰트에서는 Weight, Width 등의 축으로 조절해 폰트를 가꿀수 있음.... Italic 여부, 글자 기울기 등도 Axis로 사용하기도 함

 

 

 

Svelte

 

Html 상에서 Variable 반복

 

<ul>
	{#each cats as cat}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
			{cat.name}
		</a></li>
	{/each}
</ul>

https://svelte.dev/tutorial/each-blocks

 

each 문으로 해결할수 있음

Logic / Each blocks • Svelte Tutorial

 

SCSS Import

 

 

svelte-preprocess와 scss를 설치하면 끝~

 

svelte-preprocess만 설치해놓고 sass 적용 왜 안되지 했었는데 별도로 설치해주어야했음.

 

yarn add --dev svelte-preprocess sass

 

https://github.com/sveltejs/svelte-preprocess

GitHub - sveltejs/svelte-preprocess: A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS

 

Prepending content

SCSS를 사용하는 모든 곳에 특정 scss를 auto import해줄수 있는 기능이 svelte-preprocess에 있음. 이를 prependingData라고 함

import svelte from 'rollup-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess';

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
         sourceMap: !production,
+        scss: {
+          // We can use a path relative to the root because
+          // svelte-preprocess automatically adds it to `includePaths`
+          // if none is defined.
+          prependData: `@import 'src/styles/variables.scss';`
+        },
         postcss: {
           plugins: [require('autoprefixer')()]
         }
      }),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css')
      },
    }),
  ],
}

 

요렇게 넣어주면 해당 위치에서 import 안해줘도 자동으로 import가 됨.

 

 

 

고민점

 

Typescript interface/type을 쓰려면 별도의 ts 파일을 생성해서 Import해줘야하는 것으로 보이는데 이게 React에서 tsx 파일에서 같이 만들수 있었던 입장에서는 조금 어색한듯..

 

script 태그에서 typescript를 사용하거나 style에서 scss를 사용하려면

<template lang="pug">
  h1 {name}
</template>

<script lang="ts">
  export let name: string = 'world';
</script>

<style lang="scss">
  h1 {
    color: $primary-color;
  }
</style>

이런 식으로 lang을 설정해줘야하는데, 굉장히 귀찮고 깜빡하는 경우도 많은데 default setting으로 설정해줄수는 없을까?

 

또한 prepending 기능을 제대로 인식을 못하는지 VS Code 상에서 Error highlight 뜨는데 이거 해결해야할듯....