[更新] TruwindCSSを使用したSvelteの使用

13625 ワード
tailwindcss svelte javascript sapper テキストリンク
更新された2020/01/27、SapperテンプレートのためのGithubリンクは、以下を加えられます🎉
私は初期の頃からTarwindを使っていました、そして、それは私のための完全なライフチェンジャーです.だから私はSvelteを使って書かれたプロジェクトでそれを使おうとしました.これらの2つを結合する既存の方法は、彼らが提供した開発者経験に関して十分でありませんでした.それで、私はより良いアプローチを考え出そうとしました.あなたが読書をお楽しみください!

TLドクター
私は、Svelteの前処理機能とPostcsssvelte-preprocess 風車を扱う.チュートリアルをスキップし、Githubで公開したテンプレートを使用できます.

sarioglu / svelte-tailwindcss-template
svelteで基本的なアプリケーションを構築するためのテンプレート
共有コンポーネントテンプレートを探すこと?ここへsveltejs/component-template
Svelte TailWindCSSテンプレート
これは、SetWindCSSの使用を可能にするSvelteのプロジェクトテンプレートのフォークです.参照https://github.com/sveltejs/template を参照してください.
このテンプレートを使用して新しいプロジェクトを作成するにはdegit :
npx degit sarioglu/svelte-tailwindcss-template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are…

View on GitHub

Existing methods

There are several other works to integrate Tailwind into Svelte. You can even find a couple of examples under Tailwind's GitHub account.

However, these methods have some structural weaknesses:

  • They create another pipeline alongside Svelte to process external css. Tailwind will be processed by PostCSS while component styles are being processed by Svelte. That's why developers need to reconsider everything from transpiling to minimization.
  • They make it impossible to use directives of Tailwind (like @apply or @screen) in component styles.
  • They create an auto-generated css file within the codebase.

That's why I've come up with a new approach to make this integration smoother. So let's start with it:

1-Create a Svelte app

First, we need to initialize a Svelte app using the following commands. If you already have an existing one, you can skip this section.

npx degit sveltejs/template [my-svelte-project]
cd [my-svelte-project]

npm install
これらのコマンドは、公式Svelteアプリテンプレートをクローンし、必要な依存関係をインストールします.

2イニシャライズ
前の手順に従って、次のコマンドを使用して、Tarwindの統合に必要な依存関係をインストールします.
npm i -D @fullhuman/postcss-purgecss postcss postcss-load-config svelte-preprocess tailwindcss
次に、次のコマンドを実行してTailwindを初期化します.
npx tailwind init
ファイル名を作成します.tailwind.config.js コードベースで.このファイルを編集または置換することで、Tailwind設定を拡張できます.

3統合を行う
統合を行うには2つのファイルが必要です.使いましょうpostcss.config.js スタイルをスタイルを処理するためにPostwindを構成するために.Postcssは、Purgecssを使用して、プロダクションモードで未使用のスタイルを取り除くことに注意してください.Svelte自体がこれらのものであるので、svelte自体によって生成されるホワイトリストCSSクラスも必要とします.

Postcss.設定.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/**/*.svelte'
  ],

  whitelistPatterns: [/svelte-/],

  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const production = !process.env.ROLLUP_WATCH

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(production ? [purgecss] : [])
  ]
};
Tailwindcss.svelte ファイルはスタイル定義だけを持つsvelteコンポーネントを含んでいます.我々は、アプリケーションにユーティリティクラスを注入するために使用します.global ディレクティブは、このコンポーネントのスタイルがグローバルに利用できることを意味します.

src/tailwindcss.スベルト
<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>
このコンポーネントをアプリケーションにインポートする必要があります.

src/appスベルト
<script>
  import Tailwindcss from './Tailwindcss.svelte';
  ...
</script>

...
<Tailwindcss />
...
そうすることによって、我々は我々のアプリでTailwindによって提供されるクラスを使用することができます.
最後に、使用するrolulup設定を調整しますsvelte-preprocess コンポーネントのスタイルを処理します.

ロールプ設定.js
import sveltePreprocess from 'svelte-preprocess'

...
svelte({
  ...
  preprocess: sveltePreprocess({ postcss: true }),
  ...
})
...

結果
この新しいアプローチを使用することで、我々はSvelteの前処理能力とPostCSSを組み合わせることによって、我々はTailwindのすべての機能から利益を得ることができます.ユーティリティクラスを使用したり、ディレクティブを呼び出してコンポーネントのスタイルに結合できます.これらのすべてのスタイルは、追加のパイプラインを作成せずにsvelteで処理されます.
結果を示すためにアプリを使用して実行しましょうnpm run dev いくつかのスタイルをApp.svelte :
<style>
  h1 {
    @apply bg-black text-white;
  }
</style>
あなたは、Tailwindによって提供されるスタイルが完全に我々の強力に適用されるのを見ますHello world! メッセージ.だから、より良い原因のためにそれらを使用して起動することができます!

どのようなサパー?
問題ない!あなたはあなたのsapperアプリにテールウィンドを統合するために同じ手順を適用することができます.クライアントとサーバの両方の設定を変更したことを確認してください.
私は、githubにsapperテンプレートを発表しました.公式テンプレートに基づいているので、rollupとwebpackのセットアップを使用することができます.ここにリンクがあります.

sarioglu / sapper-tailwindcss-template
サッパーアプリのためのスターターテンプレート
SAPPERテンプレート
これは、TapWindCSSの使用を有効にするために、Sapperのプロジェクトテンプレートのフォークです.参照Sapper を参照してください.
始める
使用degitRollupに基づいて新しいSAPPERプロジェクトを作成するには
NPX Degit "Sarioglu/Sapper TarwindCSSテンプレート
Webpackベースのプロジェクトの代わりに
NPX Degit "Sarioglu/Sapper TarwindCSSテンプレート
degit リポジトリのブランチからディレクトリを作成できる足場ツールです.
置換my-app プロジェクトを作成するパスを指定します.
Githubテンプレートの使用
また、Githubのリポジトリとして新しいプロジェクトを作成することもできます.
どちらかになるsapper-template-rollup or sapper-template-webpack テンプレートで初期化された新しいプロジェクトリポジトリを作成するには、この「テンプレートを使用」をクリックします.
プロジェクトの実行
プロジェクトを作成したら、依存関係をインストールし、開発モードでプロジェクトを実行します.
マイ・アプリ
NPMインストール
NPMの実行
…
View on GitHub

その他の利益
使用svelte-preprocess PostCSSにコンポーネントのスタイルを処理させるには、さまざまな他の利点があります.使えますpostcss.config.js PostCSSプラグインをインポートするにはautoprefixer , などのプラグインはすぐにコンポーネントのスタイルの世話をするでしょう.
02_Part_OOP in JavaScript
[SWEA] - 1896. 数値