Svelte와 함께 scs를 사용하는 방법은 무엇입니까?

3970 단어
간단한 질문처럼 들릴지 모르지만, 나는 거의 좌절감을 느끼기까지 충분한 시간이 걸렸다. 간단하지만 문서가 간단하지 않습니다. 그래서 이 과정을 밟고 싶었다.

목차


  • Svelte Installation
  • Svelte Preprocess
  • Sass

  • 날렵한 설치

    npx degit sveltejs/template my-svelte-project

    npm install

    npm run dev

    Svelte 전처리

    npm install -D svelte-preprocess

    After installation,
    1)import svelte-preprocess in rollup.config.js.
    2)add preprocess: sveltePreprocess()
    -
    source for svelte preprocess

    import svelte from 'rollup-plugin-svelte'
    + import sveltePreprocess from 'svelte-preprocess';
    
    export default {
      ...
      plugins: [
        svelte({
    +     preprocess: sveltePreprocess(),
          // 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')
          },
        }),
      ],
    }
    


    사스

    npm install -D sass

    - source for this step

    <style type="text/scss">
       @import "./styles.scss";
    </style>
    


    또는

    <style lang="scss">
        ...
    </style>
    

    좋은 웹페이지 즐겨찾기