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

在查看此 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文档模块，在应用 Tailwind CSS 之前postcss-import预处理语句。@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 中单击“开始”按钮那么简单。但是工作流程很简单，团队的其他成员也可以学习。如果上述工作流程出现问题，我会看看我当时的选择是什么。

接下来我可能会关注的是删除未使用的 Tailwind CSS

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

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

问题描述

解决方案

推荐阅读