Question

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

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

Answer 1

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

创建npm程序包

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

已安装/配置的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 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

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

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

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

Answer 2

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

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

有关更多详细信息，请查看其GitHub repo。

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

2 个答案: