javascript

SvelteKit / SASS / SCSS 사용법

까망거북 2024. 9. 4. 15:08

설치

  • npm i -D sass svelte-preprocess

설정 변경

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess"; <-- 추가
/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess({ scss: true }),<-- 추가
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

사용


<style lang="scss">
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
    }
  }
</style>