将Tailwind CSS放入ASP.NET Core项目的最佳方法是什么？

Question

特别是，我在ASP.NET Preview 8中使用Blazor（托管服务器）。我尝试使用Libman添加它-但这似乎更多是关于从CDN下载文件。我想向我的构建过程介绍Tailwind。

这是我应该使用Webpack之类的情况吗？如果是这样，无论如何，如何使webpack成为我的构建过程的一部分！

Answer 1

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

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

有关更多详细信息，您可以查看其GitHub 存储库。

Answer 2

在查看了此SO 帖子中的信息之后。这是我最终实现的内容的简要概述。它并不完美，需要一些工作。但这是一个很好的起点（不要使事情变得太复杂）。

创建npm包

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

已安装/已配置的Webpack

根据webpack安装指南，我执行了以下操作：

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”的子文件夹/项目下面），并使用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模块的@import说明，在应用Tailwind CSS之前会对语句进行预处理。

使它起作用

配置完所有内容后，我将以下脚本添加到了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容器中运行。所以我最终致电npm run production了Dockerfile：

# 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中的“开始”按钮那样简单。但是工作流非常简单，团队其他成员也可以学习。如果上述工作流程出现问题，那么我将看看此时的选择。

我可能要关注的下一件事是删除未使用的Tailwind CSS

如果有任何没有意义或可以做得更好的事情，请告诉我！