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

3005 ワード
webdev core tailwindcss programming テキストリンク
我々は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>
    次のステップは、我々のプロジェクトにテーマ機能を追加します.
    滞在曲!
    AWSラムダにおけるノード無サーバ機能のデバッグ
    を使用してDockerビルドラムダ関数を展開する