特别是，我将 Blazor（服务器托管）与 ASP.NET Core Preview 8 一起使用。我尝试使用 LibMan 添加它，但这似乎更多是关于从 CDN 下载文件。我想将 Tailwind 引入我的构建过程。
在这种情况下我应该使用 Webpack 之类的东西吗？如果是这样，我如何让 Webpack 成为我构建过程的一部分？
【问题讨论】：
标签： asp.net-core webpack asp.net-core-3.0 tailwind-css
我最近问自己同样的问题。我决定我不喜欢项目中的 package.json 或 node_modules 目录。由于这些原因，我创建了一个带有新构建操作的NuGet package。
使用此构建操作，您可以简单地为样式表指定构建操作“TailwindCSS”，并且在构建过程中，样式表将通过 PostCSS 进行转换。
更多详情你可以看看它的GitHub repo。
【讨论】：
查看此 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 文件。请注意，它主要用于使用 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 容器中运行。所以我最终在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
如果有什么不合理或可以做得更好的地方，请告诉我！
【讨论】：