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

mklgxw1f  于 2023-10-19  发布在  Webpack
关注(0)|答案(5)|浏览(234)

特别是,我正在使用Blazor(服务器托管)与ASP.NET Core Preview 8。我尝试使用LibMan添加它,但似乎更多的是从CDN下载文件。我想向Tailwind介绍我的构建过程。
在这种情况下,我应该使用Webpack之类的东西吗?如果是,我如何让Webpack成为我构建过程的一部分?

gajydyqb

gajydyqb1#

更新2022

原来的答案还在下面……
自从我最初提出这个问题以来,时间已经过去了。例如,我现在的目标是在没有Babel的现代浏览器上使用ES6(这是我使用Webpack的主要原因)。
所以我想我可以记录我当前的解决方案(Tailwind安装了npm,没有Webpack)
假设您安装了npmnode.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代码,有一个弯弯曲曲的线!

接下来,我安装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上找到了克里斯的这篇相当出色的文章。虽然我认为这个版本避免了与Visual Studio的集成。
确保将NpmLastInstall元素和Target元素复制并粘贴到.csproj文件中的相应位置。
如果您处于DEBUG模式,Visual Studio将执行npm run build。如果您处于RELEASE模式,它将执行npm run release。如果您刚刚从服务器提取了repo,Visual Studio应该足够智能,可以自动执行npm install。唯一的问题是,我不认为它会运行npm install时,package.json文件已更新-你需要记住手动这样做。
.csproj文件中以npm为目标意味着Tailwind将在ASP.NET Core项目生成时生成。事情将保持一致-如果你点击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
如果有什么不合理或可以做得更好的地方,请让我知道!

pkmbmrz7

pkmbmrz72#

我最近也问过自己同样的问题。我决定我不喜欢项目中的package.json或node_modules目录。由于这些原因,我创建了一个带有新构建操作的NuGet package
通过这个构建动作,你可以简单地给予你的样式表构建动作“TailwindCSS”,在构建过程中,样式表将通过PostCSS进行转换。
有关更多详细信息,您可以查看其GitHub repo

ilmyapht

ilmyapht3#

更新以反映Tailwind实验室内的变更:
创建了一个新的独立CLI,允许使用CLI而无需安装webpacknodejs / npm
下载exe(macOS和Linux可用),并在proj目录中运行它,就像您运行普通的Python一样。
详情请参阅:https://tailwindcss.com/blog/standalone-cli

laawzig2

laawzig24#

在这个问题的时候,这里给出的答案可能是最好的方法。随着顺风的发展,如今有了替代方法:
最近我开始使用这种方法,它更容易,不需要npm:https://github.com/tesar-tech/BlazorAndTailwind
非常容易设置和运行的顺风手表在后台工作很好。

jk9hmnmh

jk9hmnmh5#

安装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应用程序,而HTMLRazor文件适用于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,找到[这里][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>

相关问题