将 Tailwind CSS 纳入 ASP.NET 核心项目的最佳方式是什么？

Question

特别是，我将 Blazor（服务器托管）与 ASP.NET Core Preview 8 一起使用。我尝试使用 LibMan 添加它，但这似乎更多是关于从 CDN 下载文件。我想将 Tailwind 引入我的构建过程。

在这种情况下我应该使用 Webpack 之类的东西吗？如果是这样，我如何让 Webpack 成为我构建过程的一部分？

Answer 1

查看此 SO 中的信息后。这是我最终实现的内容的快速运行记录。它并不完美，需要一些工作。但这是一个很好的起点（不会让事情变得太复杂）。

已创建 npm 包

I 运行 npm init 在解决方案的根目录中 - 这创建了一个 package.json 文件。根据我阅读的建议，不应在 project/sub-folder.

下创建

Installed/Configured 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 文件。请注意，它主要用于使用 Tailwind 处理 css：

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（位于名为 "Holly" 的 sub-folder/project 下方）并使用 [= 处理它97=] 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 documentation postcss-import 模块在应用 Tailwind CSS.

之前预处理 @import 语句

让它发挥作用

一切配置完成后，我将以下脚本添加到 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

如果我可以在任何时候更改文件（使用 gua运行tee，它会等待所述编译调试应用程序）并让 Visual Studio 向我显示错误。但那又是 fish/much 更难的一壶了。所以我确定了以下工作流程。

当我在我的机器上进行调试时，我运行在打开的终端中执行此命令：

npm run watch

每当 .css 文件更改时，都会生成一个新的 holly.css 文件。当应用程序运行ning 时，它工作正常 - 我只需要在我进行更改后刷新页面。

生产服务器运行在 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 中的 "Start" 按钮那么简单。但工作流程非常简单，团队的其他成员也可以学习。如果上述工作流程出现问题，我会看看此时我的选择是什么。

接下来我可能会关注的是删除 unused Tailwind CSS

如果有任何不合理或可以做得更好的地方，请告诉我！

Answer 2

我最近也问过自己同样的问题。我决定不喜欢项目中的 package.json 或 node_modules 目录。由于这些原因，我创建了一个带有新构建操作的 NuGet package。

通过此构建操作，您可以简单地为样式表指定构建操作 "TailwindCSS"，在构建过程中，样式表将通过 PostCSS 进行转换。

更多详细信息，您可以查看其GitHub repo。

将 Tailwind CSS 纳入 ASP.NET 核心项目的最佳方式是什么？

What's the best way to get Tailwind CSS into an ASP.NET Core project?

webpack

asp.net-core

tailwind-css

asp.net-core-3.0