PostCss из Tailwindcss не работает в моем проекте ASP.NET Core 8

Я пытаюсь реализовать PostCss из Tailwindcss в своем проекте ASP.NET, но он не работает. Я получаю это на консоли

GET http://localhost:5000/wwwroot/css/output.css net::ERR_ABORTED 404 (не найден)

но этот путь выходит, и там есть несколько классов Tailwindcss.

Вот мой репозиторий на GitHub с конфигурациями, в нем почти ничего нет, просто пытаюсь сначала реализовать postcss! Спасибо!

Просмотры/Главная/index.cshtml

      <!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./wwwroot/css/output.css" rel="stylesheet">
  </head>
  <body>
    <div class="bg-red-500">Bem Vindo!</div> 
  </body>
</html>

Программа.cs

      var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

var app = builder.Build();

app.UseDeveloperExceptionPage();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

пакет.json

      {
  "name": "workload",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "dev": "postcss wwwroot/css/tailwind.css -o wwwroot/css/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5"
  }
}

.csproj

      <Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="8.0.0" />
  </ItemGroup>

  <Target Name="RunNpmDev" BeforeTargets="Build">
    <Exec Command="npm run dev" />
  </Target>

</Project>

хвостовой ветер.config.js

      /** @type {import('tailwindcss').Config} */
export default {
  content: ["./**/*.{razor, cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

      export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

https://github.com/angelollima/workload

Источник

1 ответ

Я переключил код ниже

<link href="./wwwroot/css/output.css" rel="stylesheet">

для

<link rel="stylesheet" href="~/css/styles.css">

Это сработало отлично!

Источник
Другие вопросы по тегам