尾風のASPへの統合ネットコアプロジェクト

我々はVisual Studio 2022 Communityを使用します.
あなたはGem.NetTailwindでコードを見つけることができます

1 . create aspNETコア6.0のWebアプリケーション

かみそりページ構造を追加します.

2 .プロジェクトにNPMサポートを追加します。

3 .パッケージマネージャコンソールでTailwindをインストールします。

PM> cd Gem.NetTailwind
PM> npm install -D tailwindcss cross-env
PM> npx tailwindcss init

“nodeilesモジュール”がインストールされました.
“tailwind . config . js”ファイルが作成されました.

設定するには、次のようにします。

は、風を更新します.設定.あなたのすべてを含むJSファイル.剃刀と.cshtmlファイル.

Tarwind入力スタイルシートスタイル\入力を作成します.CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

最後に、パッケージを更新します.このスクリプトセクションを追加するJSONファイル

"scripts": {
    "tailwind": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/input.css -o ./wwwroot/css/output.css --watch"
  },

5 .風を追加します。拡張。プロジェクトにaspnetcore；

Tailwind aspnetcore nugetパッケージをインストールします.
プログラムする.CSとAPP前にこのコードを追加します.run ()
( app . environment . isdevelopment ()ならば)
{ }
アプリ.Runtailwind ("Tailwind ", "/");
////
アプリ.runtailwind ("tailwind ", "/client/");
｝
このUseステートメントをプログラムに追加します.cs
を使う

ASPMをASPに組み込む。を使用するネットコアプロジェクト

そして、あなたの*を修正してください.csprojファイル.

<PropertyGroup>
 ...
 <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
</PropertyGroup>
...
<!-- Check whether npm install or not! -->
<Target Name="CheckForNpm" BeforeTargets="NpmInstall">
 <Exec Command="npm -v" ContinueOnError="true">
  <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
 </Exec>
 <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
</Target>

<!-- install package.json package auto "node_modules" -->
<Target Name="NpmInstall" BeforeTargets="Compile" Inputs="package.json" Outputs="$(NpmLastInstall)">
<Exec Command="npm install" />
<Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
</Target>

次のステップは、我々のプロジェクトにテーマ機能を追加します.
滞在曲!