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

Posted 2023-03-07

【中文标题】Tailwind 的 @apply 指令适用于前端，但不适用于 Angular Universal 的后端

【英文标题】：Tailwind's @apply directive works in frontend but not on backend with Angular Universal

【发布时间】：2021-01-30 05:02:21

【问题描述】：

我有一个 Angular 2 应用程序，版本 9.1，它使用 Angular Universal 的服务器端渲染功能来交付我们的页面。该应用程序还使用 Tailwind CSS 框架。为了支持 Tailwind，我们使用 @angular-builders/custom-webpack:browser builder 构建架构师和 @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 的 purgecss 功能运行良好，最终一切都可以正确渲染，但 Tailwind 的一个重要功能似乎无法正确利用。 (@apply 功能)[https://tailwindcss.com/docs/extracting-components] 有效，但仅在浏览器呈现页面后在前端计算。作为一个例子，这里是从 s-s-r 服务器传递到文档中浏览器的 CSS 的 sn-p。

<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 的构建过程是如何工作的，可能有助于解决这个问题？

【问题讨论】：

你找到解决办法了吗？

@Starscream 我在下面提供了答案。

【参考方案1】：

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

【参考方案2】：

我有同样的症状。在服务器端计算样式中包含 @apply 指令对我来说是一个明确的信号，表明 tailwind 没有在服务器包上运行。

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

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

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

请注意，如果您使用 Angular 的本机顺风支持（版本 11.2），您不必这样做，它可以开箱即用。