webpack 如何将Tailwind CSS添加到Blazor应用程序中？

更新2022

原来的答案还在下面……
自从我最初提出这个问题以来，时间已经过去了。例如，我现在的目标是在没有Babel的现代浏览器上使用ES6（这是我使用Webpack的主要原因）。
所以我想我可能会记录我当前的解决方案（Tailwind cli安装了npm而没有Webpack）
假设您安装了npm（node.js的一部分）。在项目的根目录中：

npm init -y

这将创建一个package.json文件。这是我的文件看起来像：

{
  "name": "holly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

NB-我将name小写（文件夹/项目名称为“冬青”）-我正在使用VS Code查看文件，有一条弯弯曲曲的线！

接下来，我安装Tailwind：

npm install -D tailwindcss cross-env

我还添加了cross-env-这样我就可以在我的开发机器（Windows）和GitHub Action中运行相同的命令。
之后，生成Tailwind配置文件：

npx tailwindcss init

这将创建一个类似于以下内容的文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

我使用的是ASP.NET Core/Blazor Server。因此，我将content属性设置为：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{razor,cshtml,html}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

现在Tailwind已经配置好了，我们需要一个输入文件来生成css。在我的项目中，我创建了一个Styles文件夹和一个名为app.css的文件：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

下一步是创建一些方便的npm脚本。这就是我的package.json文件现在的样子：

{
  "name": "holly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "cross-env": "^7.0.3",
    "tailwindcss": "^3.2.4"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css",
    "watch": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --watch",
    "release": "cross-env NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Visual Studio将在DEBUG模式下使用build
watch对于开发模式下的动态更新非常方便。
release用于生产

最后，将以下内容添加到项目文件（在我的示例中为Holly.csproj）：

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>

    <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
  </PropertyGroup>

  <!-- Items removed for brevity --> 

  <Target Name="CheckForNpm" BeforeTargets="NpmInstall">
    <Exec Command="npm -v" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
  </Target>

  <Target Name="NpmInstall" BeforeTargets="BuildCSS" Inputs="package.json" Outputs="$(NpmLastInstall)">
    <Exec Command="npm install" />
    <Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
  </Target>

  <Target Name="BuildCSS" BeforeTargets="Compile">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
    <Exec Command="npm run release" Condition=" '$(Configuration)' == 'Release' " />
  </Target>
</Project>

这是基于一个教程，我发现写的克里斯圣蒂（我无法找到目前）。然而，我确实在Adding Tailwind CSS v3 to a Blazor app上找到了Chris的这篇相当出色的文章。虽然我认为这个版本避免了与Visual Studio的集成。
确保将NpmLastInstall元素和Target元素复制并粘贴到.csproj文件中的相应位置。
如果您处于DEBUG模式，Visual Studio将执行npm run build。如果您处于RELEASE模式，它将执行npm run release。如果您刚刚从服务器提取了存储库，Visual Studio应该足够智能，可以自动执行npm install。唯一的问题是，我不认为它会运行npm install时，package.json文件已更新-你需要记住，这样做的手动。
在.csproj文件中以npm为目标意味着Tailwind将在ASP.NETCore项目生成时生成。事情将保持一致-如果你点击F5，你知道css是最新的！Tailwind JIT在默认情况下是打开的-所以Tailwind构建时间可以忽略不计，并且不会增加总构建时间。
最后一件事因为Tailwind css是由Visual Studio项目更新的--这意味着同样的事情发生在云中。以下是我的GitHub Action的精简版本：

name: production-deployment

on:
  push:
    branches: [ master ]

env:
  AZURE_WEBAPP_NAME: holly
  AZURE_WEBAPP_PACKAGE_PATH: './Holly'
  DOTNET_VERSION: '6.0.x'
  NODE_VERSION: '12.x'

jobs:
  build-and-deploy-holly:
    runs-on: ubuntu-latest
    steps:
      # Checkout the repo
      - uses: actions/checkout@master

      # Setup .NET Core 6 SDK
      - name: Setup .NET Core ${{ env.DOTNET_VERSION }}
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: ${{ env.DOTNET_VERSION }}

      # We need Node for npm!
      - name: Setup Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}

      # Run dotnet build and publish for holly
      - name: Dotnet build and publish for holly
        env:
          NUGET_USERNAME: ${{ secrets.NUGET_USERNAME }}
          NUGET_PASSWORD: ${{ secrets.NUGET_PASSWORD }}
        run: |
          cd '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}'
          dotnet build --configuration Release /warnaserror
          dotnet publish -c Release -o 'app'

      # Deploy holly to Azure Web apps
      - name: 'Run Azure webapp deploy action for holly using publish profile credentials'
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE  }} # Define secret variable in repository settings as per action documentation
          package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/app'

Setup Node.js步骤确保在运行dotnet build命令之前npm可用。dotnet build命令将触发Tailwind构建过程。由于cross-env，相同的命令将在Windows，macOS或Linux机器上工作。
我想就这些了！

原始应答

在查看本SO post中的信息后。下面是我最终实现的一个快速概要。它并不完美，它需要一些工作。但这是一个很好的起点（不要让事情变得太复杂）。

已创建npm包

我在解决方案的根目录下运行了npm init-这创建了一个package.json文件。根据我读到的建议，这不应该在项目/子文件夹下创建。

已安装/配置Webpack

基于webpack installation guide，我做了以下操作：

npm install webpack webpack-cli --save-dev

在准备Tailwind安装时，我还安装了以下内容（有关更多详细信息，请参阅下面的webpack.config.js文件）：

npm install css-loader postcss-loader mini-css-extract-plugin --save-dev
npm install tailwindcss postcss-import

这是我的webpack.config.js文件。请注意，它主要是面向处理css与Tailwind：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const bundleFileName = 'holly';
const dirName = 'Holly/wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName)
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

在css的情况下，这将采用单个入口点styles.css（位于名为“冬青”的子文件夹/项目下），并使用PostCSS/Tailwind CSS处理它。CSS被分解成单独的文件，但由postcss-import处理（下面有更多内容）。所有的CSS都被编译成一个名为holly.css的文件。

管理多个CSS文件

在我的解决方案的根目录中还有一个postcss.config.js文件：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

这将配置Tailwind的PostCSS，但也包括postcss-import。在Webpack配置中，styles.css是处理的入口点：

@import "tailwindcss/base";
@import "./holly-base.css";

@import "tailwindcss/components";
@import "./holly-components.css";

@import "tailwindcss/utilities";

根据Tailwind文档，postcss-import模块在应用Tailwind CSS之前预处理@import语句。

Making It Work

配置好所有东西后，我将以下脚本添加到npm包中：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress --profile",
    "watch": "webpack --progress --profile --watch",
    "production": "webpack --progress --profile --mode production"
  },

要将Tailwind应用于styles.css文件，我运行了以下命令：

npm run build

如果我能让Visual Studio在文件被更改的任何时候运行上面的命令（保证在调试应用程序时它会等待所述编译），并让Visual Studio向我显示错误，那就太好了。但那是另一码事/困难得多。所以我选择了下面的工作流程。
当我在我的机器上调试时，我在一个开放的终端中运行这个命令：

npm run watch

每当.css文件更改时，都会生成一个新的holly.css文件。这在应用程序运行时工作正常-我只需要在更改后刷新页面。
生产服务器在Docker容器中运行。所以我最终在Dockerfile中调用了npm run production：

# Latest .NET Core from https://hub.docker.com/_/microsoft-dotnet-core-sdk/ (not the nightly one)
FROM mcr.microsoft.com/dotnet/core/sdk:3.0.100-preview9-disco AS build-env

# Setup npm!
RUN apt-get -y update && apt-get install npm -y && apt-get clean

WORKDIR /app
COPY . ./

# To run Tailwind via Webpack/Postcss
RUN npm install
RUN npm run production

RUN dotnet restore "./Holly/Holly.csproj"
RUN dotnet publish "./Holly/Holly.csproj" -c Release -o out

正如您所看到的，构建过程并不像在Visual Studio中点击“开始”按钮那么简单。但是工作流程很简单，团队的其他成员可以学习。如果上面的工作流程出现问题，我会看看我在这一点上的选择。
接下来我可能要关注的是删除unused Tailwind CSS
如果有任何不合理或可以做得更好的地方，请让我知道！

安装Tailwind版本3 - 2023 UPDATE：.

CDN

将Tailwind CSS安装到Blazor应用程序中的第一种也是最简单的方法是使用CDN。在TW 3中，CDN提供了一个JS库，而不再只是一个静态的CSS文件.
要添加CDN，请将以下脚本代码添加到WASM应用程序的index.html文件的头部和Blazor Server应用程序的_hosts.cshtml文件的头部。

<head>
...
<title>Tailwind via Play CDN</title>
<base href="/" />
<script src="https://cdn.tailwindcss.com"></script>

虽然，这对于小型项目来说很好，但学习使用CDN会使生产环境的问题复杂化。
单页应用程序的整个思想是减少对服务器调用的持续需求。现在您使用的CDN需要在每次页面加载时调用服务器。这种方法对于生产环境并不理想。

将Tailwind安装到项目中。

有两种基本方法可以将TW 3合并到Blazor项目中。
1.使用CLI
1.使用现有工具发布CSS（如Webpack）
如果你已经在使用某种JS实现，那么使用PostCSS是最好的。
当谈到CLI时，TW 3现在有两种实现方式。
1.使用像NPM这样的包管理器
1.使用独立CLI

使用NPM

如果您的应用程序已经使用NPM，或者您作为开发人员已经习惯使用NPM，那么这将是更好的选择
您可以使用以下命令在您的计算机上全局安装TW 3。
npm install -g tailwindcss
然后，从Blazor应用的根目录，您可以使用以下命令将TW 3安装到您的项目中。
npx tailwindcss init
这将创建一个tailwind.config.js文件，如下所示：

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

我们需要对这个文件做的就是告诉CLI它应该寻找的文件格式。这可以通过添加以下内容来实现。
请注意，cshtml文件适用于Blazor Server应用程序，而HTML和Razor文件适用于WASM应用程序。这段代码包括了这三个方面。

module.exports = {
  content: ["./src/**/*.{razor,html,cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

下一步是创建一个源CSS文件
您可以为此创建一个单独的文件夹和css文件，并添加以下代码行。

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

这些是TW 3指令，它们将被替换为应用程序中TW类可能碰巧使用的任何CSS。
现在我们可以使用终端来启动TW 3 CLI。
npx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch
在这种情况下，生成的CSS将导出到wwwroot文件夹。如果你想把它放在其他地方，相应地改变路径。
最后一块拼图是将此CSS文件的引用添加到Blazor应用程序的主机页面，如...

<head>
    ...
    <title>Tailwind via NPM</title>
    <base href="/" />
    <link href="app.css" rel="stylesheet" />
</head>

使用独立CLI。许多步骤是相同的。首先，您必须从TW repo下载独立CLI，找到[here][1]。请花一点时间为您的操作系统下载正确的CLI。
然后将可执行文件添加到应用的根文件夹中，并以相同的方式使用它。
生成配置文件。
./tailwindcss init
用要查看的文件扩展名更新它。

module.exports = {
  content: ["./src/**/*.{razor,html,cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建源CSS文件并添加指令。

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

然后，我们可以使用类似的命令运行standalone CLI。
npx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch
最后，我们可以将对CSS文件的引用添加到根HTML文件中。

<head>
    ...
    <title>Tailwind via Standalone CLI</title>
    <base href="/" />
    <link href="app.css" rel="stylesheet" />
</head>

webpack 如何将Tailwind CSS添加到Blazor应用程序中？

5条答案

更新2022

原始应答

安装Tailwind版本3 - 2023 UPDATE：.

CDN

将Tailwind安装到项目中。

使用NPM

相关问题

热门标签

最新问答