Svelte 및 Storybook용 Tailwindcss 구성 방법(2020 업데이트)

지난 주에 저는 Svelte, Tailwindcss 및 Storybook을 사용하는 프로젝트를 구성하는 작업을 할당받았습니다. 나는 어떤 기술과도 일한 적이 없었기 때문에 연구에 많은 시간을 할애했습니다. 내가 깨달은 것은 작업 방법을 설명하는 기사가 많지 않고 최신 Tailwind 또는 Storybook을 사용하지 않는 기사가 있다는 것입니다. 최근 업데이트된 Storybook 및 Tailwindcss와 함께 Svelte를 사용하는 방법을 보여주기 위해 이 기사를 작성하기로 결정했습니다. 특히 몇 주 전처럼 이러한 프레임워크를 처음 접하는 사람이 쉽게 따라할 수 있도록 단계별로 설명하겠습니다.

종속성이 함께 작동하는 방식을 더 잘 설명하기 위해 이 기사를 2개의 주요 부분으로 나눌 것입니다. 먼저 Svelte를 설정한 다음 Storybook으로 넘어갑니다. 시작하자!

1부: 날씬한

(아직 Svelte 앱이 없다면 다음을 따르십시오.
this tutorial .)

1단계: Tailwind 및 종속성 설치

기본 앱의 경우 3개의 주요 종속성을 설치해야 합니다.npm i tailwindcss postcss-import svelte-preprocess

tailwindcss: 공식 Tailwindcss 플러그인입니다

.

svelte-preprocess: Svelte 구성 요소의 스타일에 필요합니다.

postcss-import: Tailwindcss 구문을 사용하는 CSS 파일을 svelte 구성 요소로 가져오기

이러한 종속성을 사용하려면 구성 파일인 postcss, rollup 및 tailwind를 업데이트해야 합니다.

2단계: 구성
재미있는 부분을 위한 시간입니다! 편집해야 하는 3개의 주요 구성 파일이 있습니다: postcss.config.js , rollup.config.js 및 tailwind.config.js
루트 디렉토리에 파일postcss.config.js을 생성하여 시작하겠습니다. Tailwindcss를 사용하려면 postcss 구성에 tailwindcss 플러그인을 추가해야 합니다. 또한 Tailwindcss 구문을 svelte 구성 요소로 직접 가져올 수 있도록 postcss-import 를 추가해야 합니다.

// postcss.config.js
module.exports = {
  plugins: [require("postcss-import"), require("tailwindcss")],
};

다음 단계는 롤업 구성을 처리하는 것입니다. rollup.config.js 에서 위의 postcss 구성으로 구성 요소 스타일을 처리하도록 svelte-preprocess를 설정해야 합니다.

// rollup.config.js
export default {
  ...
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      preprocess: sveltePreprocess({ postcss: true }),
      css: (css) => {
        css.write("bundle.css");
      },
    }),
    ...

마지막으로 루트 디렉터리에 tailwind.config.js를 만들어 tailwind 구성을 설정해야 합니다. npx tailwind init 명령을 사용하여 이 작업을 빠르게 수행할 수 있습니다.

구성해야 할 3가지 주요 사항:

purge : 이렇게 하면 Tailwind에서 생성하는 사용되지 않는 모든 CSS 규칙이 빌드 시 제거됩니다.

defaultextractor : 클래스 지시문에 사용된 순풍 스타일을 잃지 않도록 보다 맞춤화된 추출기입니다.

whitelist : 최종 CSS에 남겨두는 것이 안전한 선택자를 나타냅니다.

이제 구성이 다음과 같아야 합니다.

// tailwind.config.js
const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {},
  purge: {
    content: ["./src/**/*.svelte", "./src/**/*.html"],
    enabled: production, // disable purge in dev
    options: {
      whitelist: [/svelte-/],
      /* eslint-disable no-unused-vars */
      defaultExtractor: (content) =>
        [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
          ([_match, group, ..._rest]) => group
        ),
    },
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

3단계: 앱에 전역 Tailwindcss 추가

이제 앱에 Tailwind 스타일을 추가해 보겠습니다. 사용자 정의 스타일을 추가하기 전에 먼저 전역 유틸리티 패키지를 추가해 보겠습니다. 아래 내용으로 css 파일을 생성합니다.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

핫 리로딩을 위해 svelte 구성 요소에서 이러한 전역 스타일을 사용하려면 다음과 같이 CSS 파일을 가져올 수 있습니다.

// Tailwindcss.svelte
<style global>
@import "globals.css";
</style>

전역 스타일을 CSS 파일에 유지하려는 이유는 나중에 스토리북에 필요하기 때문입니다.

파트 2: 스토리북:

1단계: 스토리북을 설치합니다.
전체 설치를 위해 이 가이드를 따르십시오: https://storybook.js.org/docs/svelte/get-started/install

2단계: 추가svelte-preprocess이제 스토리가 Svelte를 제대로 렌더링할 수 있도록 스토리북에 전처리기를 추가해야 합니다. .storybook/main.js에 webpack 구성을 추가하여 이 작업을 수행합니다.

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

module.exports = {
  stories: ["../stories/**/*.stories.js"],
  addons: ["@storybook/addon-knobs"],

  webpackFinal: async (config) => {
    const svelteLoader = config.module.rules.find(
      (r) => r.loader && r.loader.includes("svelte-loader")
    );
    svelteLoader.options = {
      ...svelteLoader.options,
      preprocess: sveltePreprocess({ postcss: true }),
    };

    return config;
  },
};

3단계: 스토리북에 전역 스타일 가져오기
마지막으로 글로벌 스타일을 스토리북으로 가져올 시간입니다. 앞에서 만든 global.css 파일을 가져와서 쉽게 수행할 수 있습니다. 이제 왜 우리의 전역 스타일이 Svelte가 아닌 css 파일에 있기를 원하는지 알 수 있습니다.

@import "globals.css";

으아아아아아아! 이제 Svelte 및 Storybook과 함께 Tailwindcs를 손쉽게 사용할 수 있습니다. 이 정보가 도움이 되었기를 바라며 오류를 발견하면 언제든지 아래에 의견을 말하십시오. 즐거운 코딩!