如何使用官方Typescript支持+ TailwindCSS + SCSS设置Svelte

Svelte just announced their full official support for Typescript, here is a complete guide to set it up in a new project with TailwindCSS and SCSS.

Svelte刚刚宣布了对Typescript的正式支持，这是在TailwindCSS和SCSS的新项目中进行设置的完整指南。

使用Typescript设置Svelte (Setting up Svelte with Typescript)

I’ll be using yarn as package manager but you’re free to use npm if you like.

我将使用yarn作为程序包管理器，但您可以自由使用npm 。

We start with the default Svelte template

我们从默认的Svelte模板开始

npx degit sveltejs/template svelte-ts
cd svelte-ts
yarn

And then add Typescript with the provided setup script

然后使用提供的安装脚本添加Typescript

node scripts/setupTypeScript.js
yarn

Typescript support relies on a few packages, so run your package manager again after the script has run.

Typescript支持依赖于一些软件包，因此在脚本运行后再次运行软件包管理器。

Svelte now has an official VSCode extension for .svelte files. You should install it if you haven’t yet.

Svelte现在具有.svelte文件的官方VSCode扩展名 。 如果尚未安装，则应该安装它。

If you had the previous extension by James Birtles installed, you need to remove it first, you can do so by going to extensions and searching for @installed

如果您已经安装了James Birtles的先前扩展名，则需要先将其删除，方法是转到扩展名并搜索@installed

Or just run that command line to remove it

或者只是运行该命令行将其删除

code --uninstall-extension JamesBirtles.svelte-vscode

You can learn more about Svelte’s Typescript support here, it also describes how to manually do the setup for an existing project.

您可以在此处了解有关Svelte的Typescript支持的更多信息，它还描述了如何为现有项目手动进行设置。

With that, we’re all set for using Typescript with Svelte.

这样，我们就可以将Typescript与Svelte结合使用了。

添加TailwindCSS (Adding TailwindCSS)

Add the tailwindcss package and generate the tailwind.config.js configuration file.

添加tailwindcss包并生成tailwind.config.js配置文件。

yarn add tailwindcss
npx tailwindcss init

Now we need to import Tailwind’s CSS classes into our app, let’s create a Tailwind.svelte component that will do that via a global style tag.

现在，我们需要将TailwindCSS类导入到我们的应用程序中，让我们创建一个Tailwind.svelte组件，该组件将通过global样式标签执行此操作。

We use global because we need these classes to apply to every element in our page, otherwise our styles would be scoped only to that component.

我们使用global是因为我们需要这些类来应用于页面中的每个元素，否则我们的样式将仅适用于该组件。

Now we’ll import this component directly into our main App.svelte component to ensure it’s always included. We’ll also clean up the default code.

现在，我们将该组件直接导入到我们的主要App.svelte组件中，以确保始终将其包括在内。 我们还将清理默认代码。

First, remove all the CSS code in public/global.css and then replace App.svelte

首先，删除public/global.css中的所有CSS代码，然后替换App.svelte

If you run the app now, you’ll notice the text is not red and Tailwind’s styles are not applied yet.

如果立即运行该应用程序，您会注意到文本不是红色，并且尚未应用Tailwind的样式。

The reason for this is that the @tailwind directives don’t mean anything yet. For our build tool to replace them with the correct CSS styles, we’ll have to tell Rollup how to preprocess them via svelte-preprocess .

原因是@tailwind指令还没有任何意义。 为了使用正确CSS样式替换构建工具，我们必须告诉Rollup如何通过svelte-preprocess对其进行svelte-preprocess 。

Most of that setup is already done for us since the Typescript setup already comes with svelte-preprocess but we still need to tell it to use postcss and a few other packages.

因为Typescript设置已经附带了svelte-preprocess所以大多数设置已经为我们完成了，但是我们仍然需要告诉它使用postcss和其他一些软件包。

Let’s start by adding those packages

让我们开始添加这些软件包

yarn add -D postcss postcss-load-config @fullhuman/postcss-purgecss 

Create a postcss.config.js file, note that the name here is important as postcss-load-config will be looking for this file.

创建一个postcss.config.js文件，注意这里的名称很重要，因为postcss-load-config将在寻找该文件。

Since Tailwind has a ton of CSS classes to allow for flexible styling, the CSS file it generates by default is quite big (around 1.6 Mb uncompressed).

由于Tailwind具有大量CSS类以允许灵活的样式，因此它默认生成CSS文件很大(未压缩约为1.6 Mb)。

You don’t want to ship that much CSS when you’re only using a small part of it.

当您只使用CSS的一小部分时，就不想运送那么多CSS。

This is why it’s important to configure purgecss , it will take care of removing any classes we don’t use and make our production CSS bundle much smaller.

这就是配置purgecss至关重要的purgecss ，它将清除所有我们不使用的类，并使我们的生产CSS包更小。

The configuration file tells purgecss to look at all of our .html and .svelte files within oursrc folder.

配置文件告诉purgecss查看src文件夹中的所有.html和.svelte文件。

The whitelistPatterns option tells purgecss not to remove classes starting with svelte- . Svelte generates those classes to keep styles scoped to each component. Since these are generated, they don’t appear in our component’s code and would be removed by purgecss , to avoid that we whitelist them.

whitelistPatterns选项告诉purgecss不要删除以svelte-开头的类。 Svelte生成这些类，以将样式限制在每个组件的范围内。 由于这些都是生成的，因此它们不会出现在我们组件的代码中，并且会被purgecss删除，以避免我们将它们列入白名单。

You need to use this if you’re using other tools that generate classes, svelte-awesome , which provides font-awesome support, is a good example as it adds fa-icon classes and you’d need to add /fa-icon/ to the whitelist as well.

如果您正在使用其他生成类的工具，则需要使用svelte-awesome ，它提供了font-awesome支持，是一个很好的例子，因为它添加了fa-icon类，并且您需要添加/fa-icon/进入白名单。

In a general way, if any of your styles disappear in the production build, it’s probably a whitelist problem.

通常，如果您的任何样式在生产版本中消失，则可能是白名单问题。

Now we need to tell Rollup to use postcss via svelte-preprocess

现在我们需要告诉Rollup通过svelte-preprocess使用postcss

In rollup.config.js , in theplugins array where the svelte function is called, you’ll see the preprocess option calls sveltePreprocess without any arguments.

在rollup.config.js ，在调用svelte函数的plugins数组中，您将看到preprocess选项调用sveltePreprocess而没有任何参数。

We need to tell sveltePreprocess that we want to use postcss , to do so we’ll pass it a configuration object

我们需要告诉sveltePreprocess我们要使用postcss ，我们将为它传递一个配置对象

Now you can run yarn dev and you should see that our h1 is now red as expected. Tailwind is now setup.

现在您可以运行yarn dev ，您应该看到我们的h1现在变成了预期的红色。 现在已设置Tailwind。

添加SCSS支持 (Adding SCSS support)

With TailwindCSS, you rarely need to write CSS, but there are still cases where you need custom CSS.

使用TailwindCSS，您几乎不需要编写CSS，但是在某些情况下，您需要自定义CSS。

It would be nice to also support SCSS, mainly to be able to write nested CSS.

最好还支持SCSS，主要是能够编写嵌套CSS。

We’ll add a few more packages

我们将再添加一些软件包

yarn add -D node-sass autoprefixer

And a bit more Rollup config

还有更多的汇总配置

That’s all! Now you can use SCSS in your Svelte components by adding lang="scss" to your style tags.

就这样！ 现在，可以通过在样式标签中添加lang="scss"在Svelte组件中使用SCSS。

yarn dev

Yay, our text is red and gigantic!

是的，我们的文字是红色且巨大的！

准备开始项目模板 (Ready to go project template)

I’ve also made a template of this setup so you can start a project quickly, simply run

我还制作了此设置的模板，以便您可以快速启动项目，只需运行

npx degit https://github.com/skflowne/svelte-ts-scss-tailwind-template my-app

Then cd into your app and run yarn or npm install

然后进入您的应用程序并运行yarn或npm install

结论 (Conclusion)

This seems to me like a solid setup to build a lightweight app, enjoy type safety with Typescript, quickly build a nice UI with responsiveness in mind thanks to Tailwind and be able to write more advanced CSS if needed with the comfort of SCSS.

在我看来，这似乎是一个可靠的设置，可以构建轻量级应用程序，使用Typescript享受类型安全性，借助Tailwind快速构建具有响应能力的漂亮UI，并且能够在需要的情况下编写更高级CSS并舒适地使用SCSS。

Let me know if you build something with it.

让我知道您是否以此为基础。

翻译自: https://levelup.gitconnected.com/how-to-setup-svelte-typescript-tailwindcss-scss-bebdca7b2a0a