Tailwind的@apply指令在Angular Universal中在前端中起作用，但在后端中不起作用

如何解决Tailwind的@apply指令在Angular Universal中在前端中起作用，但在后端中不起作用

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

对于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的清除功能很好用，最终所有内容都可以正确渲染，但是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的构建过程如何工作有任何见解，可以帮助解决此问题？

解决方法

Angular 11.2 现在默认完全支持顺风。

,

我也有同样的症状。在服务器端计算样式中包含 @apply 指令对我来说是一个明显的迹象，即顺风没有在服务器包上运行。

这很难诊断，因为主样式包来自浏览器构建并按预期工作，但是我的组件样式表中的所有样式都没有正确编译。

我意识到我忘记更新我的 angular.json 服务器配置。通过自定义 webpack 配置配置了 tailwind，这是正确的配置，也有效地将自定义 webpack 配置应用于服务器：

"server": {
  "builder": "@angular-builders/custom-webpack:server","options": {
    "customWebpackConfig": {
      "path": "./webpack.config.ts"
    }
    // ...
  },// ...
}

请注意，如果您使用的是 angular 的原生顺风支持（版本 11.2），则无需执行此操作，它可以立即使用。