Asp.net core 什么'；将顺风CSS引入ASP.NET核心项目的最佳方法是什么？

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

---

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

在查看本so中的信息后。下面是我最终实现的内容的简要说明。它并不完美，需要一些改进。但这是一个很好的起点（不会让事情变得太复杂）

已创建npm包

我在解决方案的根目录中运行了

npminit

——这创建了一个

package.json

文件。根据我读到的建议，这不应该在项目/子文件夹下创建

已安装/配置的网页包

基于此，我做了以下工作：

npm install webpack webpack-cli --save-dev

为了准备我的Tailwind安装，我还安装了以下内容（有关更多详细信息，请参阅下面的

webpack.config.js

文件）：

这是我的

webpack.config.js

文件。请注意，它主要用于处理带有尾风的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被分解成单独的文件，但由

postsss import

处理（下面有更多内容）。所有CSS都被编译成一个名为

holly.CSS

的文件

管理多个CSS文件

我的解决方案的根目录中还有一个

postsss.config.js

文件：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

这将为顺风配置POSTSS，但也包括

POSTSS导入

。在网页包配置

样式中，css

是处理的入口点：

@import "tailwindcss/base";
@import "./holly-base.css";

@import "tailwindcss/components";
@import "./holly-components.css";

@import "tailwindcss/utilities";

根据Tailwind

postsss导入

模块在应用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

如果我能让VisualStudio在文件被修改时运行上述命令（保证在调试应用程序时它将等待上述编译），并让VisualStudio向我显示错误，那就太好了。但这又是一个难题/困难得多。因此，我决定采用以下工作流程

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

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

正如您所看到的，构建过程并不像在VisualStudio中点击“开始”按钮那么简单。但是工作流程非常简单，团队中的其他成员可以学习。如果上面的工作流程出现问题，我将看看在这一点上我的选项是什么

接下来我可能会重点关注的是删除

---

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

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

有了这个构建操作，您可以简单地为样式表提供构建操作“TailwindCSS”，并且在构建过程中，样式表将通过postss转换

---

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

我无法理解这一点。这可能是我在大约一个小时的研究中发现的最简单的答案，接下来，您可以将webpack和webpack dev脚本添加到package.json中，然后在vs package manager控制台中键入npm run webpack dev开始查看css文件，以便在saveI上自动重建。我后来意识到，您在演练中实际上使用了不同的名称执行了上述操作。唯一的区别是我从PMC而不是从独立的命令窗口运行手表。虽然这会阻止PMC被用来安装nuget软件包，所以你必须停止监视才能这样做。@Mitkins你在Github上有什么我可以看的吗。我有点迷路了，不了解项目结构。我喜欢这样。但先决条件是什么？我假设node&npm，加上一些已安装的软件包？是的，你是对的。它取决于节点和npm，所需的包（tailwindcss、postss等）将由MSBuild目标安装。

# 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