angular - Tailwind 的 @apply 指令适用于前端，但不适用于 Angular Universal 的后端

问题描述

我有一个 Angular 2 应用程序，版本 9.1，它使用 Angular Universal 的服务器端渲染功能来交付我们的页面。该应用程序还使用 Tailwind CSS 框架。我们将@angular-builders/custom-webpack:browser构建器用于构建架构师和@angular-builders/custom-webpack:dev-server服务架构师，以支持 Tailwind。

对于 Tailwind 安装，我们只需向 Webpack 添加一条规则，该规则将合并到 Angular 自己的 Webpack 定义的末尾。下面列出的是我们添加的规则。

{
  test: /\.scss$/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        syntax: 'postcss-scss',
        plugins: () => [
          require('postcss-import'),
          require('tailwindcss')('apps/dec-mkt/tailwind.config.js'),
          require('autoprefixer'),
          purgecss
        ]
      }
    }
  ]
}

该应用程序在大多数情况下都可以正常工作。Tailwind 的 purgecss 功能运行良好，一切最终都能正确渲染，但 Tailwind 的一个重要功能似乎无法正确利用。(@apply 功能)[https://tailwindcss.com/docs/extracting-components] 有效，但仅在浏览器呈现页面后在前端计算。作为一个例子，这里是从 ssr 服务器传送到文档中浏览器的 CSS 片段。

<style ng-transition="serverApp">
  .menu-item[_ngcontent-sc34]{
      @apply flex flex-col items-center justify-center text-center px-0 mx-2 py-3 text-base font-bold;
      max-width: 120px;
  }
</style>

如您所见，@apply 不是在服务器/构建时计算的。然而，在应用程序在浏览器中激活后，这些 @apply 引用确实会得到正确转换。然而，这个问题是每个使用 @apply 的 CSS 规则都没有设置样式，导致跳跃。我觉得奇怪的是，这甚至可以在浏览器中工作，因为浏览器通常不打算进行这样的处理。有没有人了解 Angular 的构建过程是如何工作的，这可能有助于解决这个问题？

标签： angularangular-universaltailwind-css

angular - Tailwind 的 @apply 指令适用于前端，但不适用于 Angular Universal 的后端

问题描述

解决方案

推荐阅读