为 Sapper 配置 TailwindCSS

sapper-tailwindcss-模板

本文是我关于 Svelte 的三篇系列文章的第三部分。第一部分介绍了如何使用 Svelte 和 Sapper 创建静态网站。第二部分将更详细地讨论Svelte 单文件组件。

本文将介绍如何为Svelte + Sapper配置TailwindCSS。

版本：
Svelte：3.18.0；
Sapper：0.27.9（早期版本）；
TailwindCSS：1.1.4；
@fullhuman/postcss-purgecss：1.3.0；
PostCSS：7.0.26；
PostCSS-CLI：7.1.0；
PostCSS-Load-Config：2.1.0

太长不看

我 fork 了官方的sapper-template仓库。它集成了 TailwindCSS、PostCSS 和 PurgeCSS。您可以安装sapper-tailwindcss-template仓库。这样您就无需阅读下面的分步指南。要使用它，请执行以下命令：

npx degit "vannsl/sapper-tailwindcss-template#rollup" sapper-tailwindcss-template
# or
npx degit "vannsl/sapper-tailwindcss-template#webpack" sapper-tailwindcss-template
cd sapper-tailwindcss-template
npm install

要启动本地服务器并监控 Tailwind，请在终端的两个不同窗口中执行以下两条命令：

npm run dev:tailwindcss

npm run dev

# for Rollup
npx degit "vannsl/sapper-tailwindcss-template#rollup" my-app
# for webpack
npx degit "vannsl/sapper-tailwindcss-template#webpack" my-app

cd my-app
npm install # or yarn
npm run dev

现有方法

GitHub 上已经有一个Sapper 的 TailwindCSS 配置示例。虽然总体配置没问题，但我在使用PurgeCSS时遇到了问题。导出Sapper 应用的静态版本时，TailwindCSS 框架中未使用的 CSS 并没有被移除。也许是我哪里操作错了。

我做了一些研究，经过几次尝试，最终成功了。以下是详细步骤：

分步指南

接下来，我们将安装 Sapper 和 TailwindCSS。

创建工兵应用程序

以下命令将使用Rollup配置为 Sapper 安装示例项目：

npx degit "sveltejs/sapper-template#rollup" sapper-tailwindcss
# or
npx degit "sveltejs/sapper-template#webpack" sapper-tailwindcss
cd sapper-tailwindcss
npm install

Sapper应用程序已安装完成。运行命令npm run dev启动本地服务器。打开http://localhost:3000查看示例项目。

下载 TailwindCSS、PostCSS 和 PurgeCSS

以下命令会将PostCSS和TailwindCSS软件包下载为开发依赖项，并将PurgeCSS下载为依赖项：

npm install -D postcss-cli tailwindcss --save
npm install @fullhuman/postcss-purgecss --save

创建配置

以下步骤的顺序并不重要。只有当以下所有更改都实施后，才能生效。

tailwind.config.js

之后，使用以下命令初始化 TailwindCSS：

npx tailwind init

tailwind.config.js此命令会在项目根目录下创建该文件。它包含以下框架：

// tailwind.config.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

如需了解如何自定义 TailwindCSS，请阅读TailwindCSS 官方配置文档。目前您可以保持默认设置。

postcss.config.js

创建一个名为 `.sapper.js` 的空文件postcss.config.js。您可以通过在 IDE 或 Finder 中创建此文件，也可以在 sapper 应用程序的根文件夹中执行以下命令（如果是 macOS）：

touch postcss.config.js

之后，将以下内容追加到文件中：

// postcss.config.js

const tailwindcss = require("tailwindcss");

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),

    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

rollup.config.js/webpack.config.js

无需任何操作。我在这里添加这部分内容是因为其他方法需要在 Rollup 配置中添加 PostCSS。但使用本文介绍的方法则无需这样做。

static/tailwind.css

现在是时候将 TailwindCSS 样式添加到您的项目中了。在 statics 目录中创建一个新的 CSS 文件。

cd static
touch tailwind.css

要导入 TailwindCSS 样式，必须在此文件中应用以下规则：

/* static/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 文件的名称并不重要。最佳实践是使用类似 `<style>` tailwind.css、` main.css<style>` 或`<style>` 这样的名称global.css。由于 Sapper 框架已经提供了一个 `<style>` 文件global.css，本教程建议使用该名称tailwind.css以避免冲突。在使用基于实用工具的 CSS 框架时，可能不需要预配置的样式global.css。如果需要，您也可以使用此文件并覆盖默认设置。

注意：此文件既可用于向 Sapper 项目添加 Tailwind CSS，也可用于添加更多全局规则和样式。例如，可以在此处注册自定义 CSS 类或字体。

package.json

package.json基本完成。为了将 TailwindCSS CSS 集成到已构建的应用程序中，以用于开发和生产模式，需要添加以下 npm 脚本：

// package.json

// ...
scripts: {
 // ...
 "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 // ...
}
// ...

main.css这些命令将在文件夹中创建（或覆盖已存在的）文件static。第一个命令dev:tailwindcss将创建一个包含所有 TailwindCSS 样式的 CSS 文件。源代码中的任何更改都会通过热模块替换立即应用到网站。在production包含 PurgeCSS 的环境中执行 PostCSS 时，NODE_ENV=production该文件main.css将仅包含您在应用程序中使用的 TailwindCSS 样式。如果您尝试这两个版本，应该会发现文件大小有显著差异main.css。

您无需为该文件命名main.css。您可以选择项目中尚未被占用的任何名称。下一节中，我们将把构建好的 CSS 文件导入到我们的应用程序中。但首先，我们需要添加build:tailwindcss在构建或导出 Sapper 应用程序时要执行的语句。因此，请在 `<script> ` 和`<script>`npm run build:tailwindcss &&脚本的开头添加以下内容：buildexport

// package.json for rollup

// ...
scripts: {
 // ...
 // "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 // "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 "build": "npm run build:tailwindcss && sapper build --legacy",
 "export": "npm run build:tailwindcss && sapper export --legacy",
 // ...
}
// ...


// package.json for webpack

// ...
scripts: {
 // ...
 // "dev:tailwindcss": "postcss static/tailwind.css -o static/main.css -w",
 // "build:tailwindcss": "NODE_ENV=production postcss static/tailwind.css -o static/main.css",
 "build": "npm run build:tailwindcss && sapper build",
 "export": "npm run build:tailwindcss && sapper export",
 // ...
}
// ...

.gitignore

如果您已经初始化了一个 Git 仓库，我建议您将其添加/static/main.css到您的.gitignore文件中。例如，以下是.gitignore演示 Git 仓库的配置文件示例：

.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/cypress/screenshots/
/__sapper__/
/static/main.css

src/template.html

要导入生成的main.css文件，请在文件中src/template.html其他导入语句的上方添加以下行：

<!-- src/template.html -->

<link rel="stylesheet" href="main.css">

项目运行

要在生产环境中运行应用程序，请执行npm run build。要生成应用程序的静态站点，请运行npm run export。通过npm run build:tailwindcss在 `<scripts>` 中添加这些脚本package.json，命令将自动生成该文件main.css。

要在本地运行该项目，请在终端的不同窗口中执行以下命令：

npm run dev:tailwindcss

npm run dev

👏 就这样，你完成了。👏