每当.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
5条答案
按热度按时间gajydyqb1#
更新2022
原来的答案还在下面……
自从我最初提出这个问题以来,时间已经过去了。例如,我现在的目标是在没有Babel的现代浏览器上使用ES6(这是我使用Webpack的主要原因)。
所以我想我可以记录我当前的解决方案(Tailwind安装了npm,没有Webpack)
假设您安装了
npm
(node.js的一部分)。在项目的根目录中:这将创建一个
package.json
文件。这是我的文件看起来像:NB-我做了
name
文件夹(文件夹/项目名称是“冬青”)-我正在看文件使用VS代码,有一个弯弯曲曲的线!接下来,我安装Tailwind:
我还添加了
cross-env
-这样我就可以在我的开发机器(Windows)和GitHub Action中运行相同的命令。然后,生成Tailwind配置文件:
这将创建一个类似于以下内容的文件:
我使用的是ASP.NET Core/Blazor Server。因此,我将
content
属性设置为以下内容:现在Tailwind已经配置好了,我们需要一个输入文件来生成css。在我的项目中,我创建了一个
Styles
文件夹和一个名为app.css
的文件:下一步是创建一些方便的npm脚本。这就是我的
package.json
文件现在的样子:DEBUG
模式下使用build
watch
只是方便在开发模式下进行动态更新。release
用于生产最后,将以下内容添加到项目文件(在我的示例中为
Holly.csproj
):这是基于一个教程,我发现写的克里斯圣迪(我无法找到的时刻)。然而,我确实在Adding Tailwind CSS v3 to a Blazor app上找到了克里斯的这篇相当出色的文章。虽然我认为这个版本避免了与Visual Studio的集成。
确保将
NpmLastInstall
元素和Target
元素复制并粘贴到.csproj
文件中的相应位置。如果您处于
DEBUG
模式,Visual Studio将执行npm run build
。如果您处于RELEASE
模式,它将执行npm run release
。如果您刚刚从服务器提取了repo,Visual Studio应该足够智能,可以自动执行npm install
。唯一的问题是,我不认为它会运行npm install
时,package.json
文件已更新-你需要记住手动这样做。在
.csproj
文件中以npm
为目标意味着Tailwind将在ASP.NET Core项目生成时生成。事情将保持一致-如果你点击F5
,你知道css是最新的!Tailwind JIT在默认情况下是打开的-所以Tailwind构建时间可以忽略不计,不会增加太多的总构建时间。最后一件事。因为Tailwind css是由Visual Studio项目更新的-这意味着同样的事情发生在云中。以下是我的GitHub Action的精简版本:
Setup Node.js
步骤确保在运行dotnet build
命令之前npm
可用。dotnet build
命令将触发Tailwind构建过程。多亏了cross-env
,相同的命令将在Windows、macOS或Linux机器上工作。我想就这些了!
原始应答
在审查本SO post中的信息后。下面是我最终实现的一个快速纲要。它并不完美,它需要一些工作。但这是一个很好的起点(不要让事情变得太复杂)。
已创建npm包
我在解决方案的根目录下运行了
npm init
-这创建了一个package.json
文件。根据我读到的建议,这不应该在项目/子文件夹下创建。已安装/已配置的Webpack
基于webpack installation guide,我做了以下事情:
在准备Tailwind安装时,我还安装了以下文件(有关更多详细信息,请参阅下面的
webpack.config.js
文件):这是我的
webpack.config.js
文件。请注意,它主要是面向处理css与Tailwind:在css的情况下,这将采用单个入口点
styles.css
(位于名为“冬青”的子文件夹/项目下),并使用PostCSS/Tailwind CSS处理它。CSS被分解为单独的文件,但由postcss-import
处理(下面有更多内容)。所有的CSS都被编译成一个名为holly.css
的文件。管理多个CSS文件
在我的解决方案的根目录下还有一个
postcss.config.js
文件:这配置了Tailwind的PostCSS,但也包括
postcss-import
。在Webpack配置中,styles.css
是处理的入口点:根据Tailwind文档,
postcss-import
模块在应用Tailwind CSS之前预处理@import
语句。Making It Work
配置好所有东西后,我将以下脚本添加到
npm
包中:为了将Tailwind应用于
styles.css
文件,我运行了以下命令:如果我能让Visual Studio在文件被修改的任何时候运行上面的命令(保证在调试应用程序时它会等待上述编译),并让Visual Studio向我显示错误,那就太好了。但那是另一码事/困难得多。所以我选择了下面的工作流程。
当我在我的机器上调试时,我在一个开放的终端中运行这个命令:
每当.css文件更改时,都会生成一个新的
holly.css
文件。这在应用程序运行时工作正常-我只需要在更改后刷新页面。生产服务器在Docker容器中运行。所以我最终在
Dockerfile
中调用了npm run production
:正如你所看到的,构建过程并不像在Visual Studio中点击“开始”按钮那么简单。但是工作流程很简单,团队的其他成员可以学习。如果上面的工作流程出现问题,我会看看我在这一点上的选择。
接下来我可能会关注的是删除unused Tailwind CSS
如果有什么不合理或可以做得更好的地方,请让我知道!
pkmbmrz72#
我最近也问过自己同样的问题。我决定我不喜欢项目中的package.json或node_modules目录。由于这些原因,我创建了一个带有新构建操作的NuGet package。
通过这个构建动作,你可以简单地给予你的样式表构建动作“TailwindCSS”,在构建过程中,样式表将通过PostCSS进行转换。
有关更多详细信息,您可以查看其GitHub repo。
ilmyapht3#
更新以反映Tailwind实验室内的变更:
创建了一个新的独立CLI,允许使用CLI而无需安装
webpack
或nodejs / npm
。下载
exe
(macOS和Linux可用),并在proj目录中运行它,就像您运行普通的Python一样。详情请参阅:https://tailwindcss.com/blog/standalone-cli
laawzig24#
在这个问题的时候,这里给出的答案可能是最好的方法。随着顺风的发展,如今有了替代方法:
最近我开始使用这种方法,它更容易,不需要npm:https://github.com/tesar-tech/BlazorAndTailwind
非常容易设置和运行的顺风手表在后台工作很好。
jk9hmnmh5#
安装Tailwind版本3 - 2023 UPDATE:.
CDN
将Tailwind CSS安装到Blazor应用程序中的第一种也是最简单的方法是使用CDN。在TW 3中,CDN提供了一个JS库,而不再只是一个静态的CSS文件。
要添加CDN,请将以下脚本代码添加到WASM应用程序的
index.html
文件的头部和Blazor Server应用程序的_hosts.cshtml
文件的头部。虽然,这对于小型项目来说很好,但是学习使用CDN会使生产环境的问题复杂化。
单页应用程序的整个思想是减少对服务器调用的持续需求。现在您使用的CDN需要在每次页面加载时调用服务器。这种方法对于生产环境并不理想。
将Tailwind安装到项目中。
有两种基本的方法可以将TW 3整合到你的blazor项目中。
1.使用CLI
1.使用现有工具发布CSS(如Webpack)
如果你已经在使用某种JS实现,那么使用PostCSS是最好的。
当涉及到CLI时,TW 3现在有两种实现方式。
1.使用像NPM这样的包管理器
1.使用独立CLI
使用NPM
如果您的应用程序已经使用
NPM
,或者您作为开发人员已经习惯使用NPM
,这将是更好的选择您可以使用以下命令在您的计算机上全局安装TW 3。
npm install -g tailwindcss
然后,从Blazor应用的根目录,您可以使用以下命令将TW 3安装到您的项目中。
npx tailwindcss init
这将创建一个
tailwind.config.js
文件,看起来像这样。我们需要对这个文件做的就是告诉CLI它应该注意的文件格式。这可以通过添加以下内容来实现。
请注意,
cshtml
文件适用于Blazor Server应用程序,而HTML
和Razor
文件适用于WASM应用程序。这段代码片段包含了所有这三个。下一步是创建一个CSS源文件
您可以为此创建一个单独的文件夹和css文件,并添加以下代码行。
这些是TW 3指令,它们将被替换为应用程序中TW类可能碰巧使用的任何CSS。
现在我们可以使用终端来启动TW 3 CLI。
npx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch
在这种情况下,生成的CSS将导出到
wwwroot
文件夹。如果你想把它放在别的地方,相应地改变路径。最后一块拼图是将此CSS文件的引用添加到Blazor应用程序的主机页面,如...
使用独立CLI。很多步骤都是相同的。首先,你必须从TW repo下载独立的CLI,找到[这里][1]。请花一点时间为您的操作系统下载正确的CLI。
然后将可执行文件添加到应用的根文件夹中,并以相同的方式使用它。
生成配置文件。
./tailwindcss init
更新它与文件扩展名观看。
创建源CSS文件并添加指令。
然后,我们可以使用类似的命令运行standalone CLI。
npx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch
最后,我们可以将对CSS文件的引用添加到根HTML文件中。