0

如果您在一个 NX 工作区中有多个应用程序并且您使用的是 TaiwindCSS，那么您的构建可能会很慢，或者在启用清除时构建会卡住。

从 Angular 11.2 开始，Tailwindcss 现在可以开箱即用了。但对我来说，清除仍然不顺利，也许这可能是 NX Workspace 问题。我花了几个小时来解决这个问题。

  module.exports = {
      purge: {
        enabled: process.env.NODE_ENV === 'production',
        content: [
          `./apps/**/*.html`,
          './libs/**/*.html',
        ],
      },
      mode: 'aot',
      darkMode: false, // or 'media' or 'class'
      theme: {
            extend: {},
          },
          variants: {},
          plugins: [],
      },
    };
4

2 回答 2

1

对于任何寻求可行解决方案的人来说——因为 Angular 11.2.0 顺风是开箱即用的。您可以单独提供根 tailwind.config.js 文件和每个项目。为了加速 css 清除，您可以通过将 tailwind.config.js 文件添加到项目目录来提供仅处理当前构建的应用程序的路径，即我的配置：

// File located in:
// <workspace>/apps/admin/tailwind.config.js
module.exports = {
    purge: {
        enabled: true,
        content: [
            './apps/admin/**/*.{html,ts}',
            './libs/**/*.{html,ts}',
        ],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

并构建前端应用程序：

// File located in:
// <workspace>/apps/webapp/tailwind.config.js
module.exports = {
    purge: {
        enabled: true,
        content: [
            './apps/webapp/**/*.{html,ts}',
            './libs/**/*.{html,ts}',
        ],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

还要记住，tailwind 会解析当前工作目录中的路径，这就是我将路径相对于工作区放置的原因。从任何其他目录运行构建命令，但工作区将不起作用。

于 2021-07-02T23:53:55.737 回答
0

这是一个可能的修复。

现在要清除，您需要启用它并告诉顺风在哪里清除。

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      `./apps/${process.env.APP_NAME}/src/**/*.html`,
      './libs/**/*.html',
    ],
  },
  mode: 'aot',
  darkMode: false, // or 'media' or 'class'
  theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
  },
};

神奇的是这两个环境变量NODE_ENV和APP_NAME. APP_NAME是确保您的构建仅清除您当前构建的项目NODE_ENV并将启用清除。

现在要完成所有工作，您需要在package.json构建脚本中添加这些变量。在我的工作区中，我有一个管理应用程序和商店应用程序。

// package.json
{
  "name": "myawesome-app",
  "version": "0.2.25",
  "license": "MIT",
  "main": "dist/apps/functions/main.js",
  "scripts": {
    "ng": "nx",
    "nx": "nx",
    "start": "ng serve --project store",
    "start:admin": "ng serve --project admin",
    "build:store": "NODE_ENV=production APP_NAME=store ng build --prod --project store",
    "build:admin": "NODE_ENV=production APP_NAME=admin ng build --prod --project admin",
  }
...

这就是我设法在我的项目中清除 Tailwind 的方法，我不确定这是否是正确的方法，但它正在工作并且构建速度非常快。

于 2021-04-13T11:22:24.493 回答