Snowpack은 더 적은 도구와 10배 더 빠른 반복으로 웹 응용 프로그램을 구축하기 위한 도구입니다. Tailwind CSS은 다음을 위한 유틸리티 우선 CSS 프레임워크입니다.
맞춤형 디자인을 빠르게 구축합니다. 두 가지를 결합하는 방법을 살펴보겠습니다. Svelte은 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식입니다.

이 문서에서는 조합하여 사용하는 방법에 대해 설명합니다. Snowpack 앱을 사용할 때 svelte-preprocess를 추가하려는 경우에도 관심을 가질 것입니다.

주형

미리 만들어진 템플릿은 Github에서 사용할 수 있습니다. 다음 명령과 함께 템플릿을 사용할 수 있습니다.

npx create-snowpack-app dir-name --template @snowpack/app-template-svelte

Svelte 및 Snowpack 설정

Snowpack은 다음과 같이 초기화할 수 있는 svelte용 공식 템플릿을 제공합니다.

npx create-snowpack-app dir-name --template svelte-tailwind-snowpack

Template Source

날렵한 전처리

Svelte 애플리케이션에 PostCSS를 추가하고 싶다면 svelte-preprocess 이 아마 생각나는 플러그인일 것입니다. PostCSS, SCSS, Less 등을 위한 자동 프로세서로 작동합니다.

하지만 우리는 Snowpack의 커스텀 플러그인을 사용하고 있기 때문에 일반적인 로더는 작동하지 않습니다. 운 좋게도 snowpack 플러그인에는 플러그인을 밀어 넣을 수 있는 비밀 해치가 있습니다. svelte.config.js라는 구성 파일입니다. 루트 폴더에 하나를 만들고 전처리기를 내보낼 수 있습니다.

module.exports = {
  preprocess: () => console.log('Preprocess Script'),
};

svelte-preprocess를 추가하려면 다음을 사용하여 설치해야 합니다.

npm i svelte-preprocess

다음을 사용하여 svelte-config.js를 수정합니다.

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  // options to preprocess here
});

module.exports = {
  preprocess,
};

PostCSS 구성

suggested on Tailwind docs 과 같이 PostCSS와 함께 Tailwind CSS를 사용합니다. 이것을 전처리에 추가하려면 다음을 수행하십시오.

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      // Plugins go in here.
    ]
  }
});

module.exports = {
  preprocess,
};

순풍 추가

Tailwind는 PostCSS 플러그인으로 사용할 수 있으며 다음과 같이 추가할 수 있습니다.

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('tailwindcss')
    ]
  }
});

module.exports = {
  preprocess,
};

물론 tailwindcss 패키지를 설치한 후.

그리고 당신은 갈 수 있습니다. Github에서 전체 템플릿을 찾을 수 있습니다.

아그님 / svelte-tailwind-snowpack

Svelte 및 Snowpack v2가 포함된 TailwindCSS

TailwindCSS를 사용한 Svelte - Snowpack

✨ Community template for Svelte and Tailwind.

다음을 사용하여 새 프로젝트를 만듭니다.

npx create-snowpack-app dir-name --template @snowpack/app-template-svelte

용도svelte-preprocess

사용 가능한 스크립트

npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:8080을 여십시오.
수정하면 페이지가 다시 로드됩니다.
또한 콘솔에 린트 오류가 표시됩니다.

npm 테스트

대화형 감시 모드에서 테스트 러너를 시작합니다.
자세한 내용은 테스트 실행에 대한 섹션을 참조하세요.

npm 실행 빌드

build/ 폴더에 사이트의 정적 복사본을 만듭니다.
앱을 배포할 준비가 되었습니다!
최상의 프로덕션 성능을 위해: "@snowpack/plugin-webpack"또는 "@snowpack/plugin-parcel"과 같은 빌드 번들러 플러그인을 snowpack.config.json 구성 파일에 추가하십시오.

Q: 꺼내기는 어떻습니까?

꺼내기가 필요하지 않습니다! Snowpack은 제로 록인을 보장하며 CSA는 이를 위해 노력합니다.


View on GitHub


Snowpack 웹 사이트의 커뮤니티 템플릿 페이지에도 나와 있습니다.

재미있게 보내세요 🎉