如何在 Nx 工作区 Angular 库中为 Storybook 启用 Tailwind.css？

Question

我在 Nx 工作区中创建了一个 Angular 库来提供 ui 组件（ui-kit）。我向这个库添加了 Storybook，效果很好。现在我还想包括 Tailwind，因为组件使用了它。

我使用该nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook命令为该库设置 tailwind。该库是可构建的。

我有一个 tailwind.config.js ，如下所示：

const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

并添加了 tailwind-imports.css 内容

@tailwind base;
@tailwind components;
@tailwind utilities;

作为导入到preview.js库的 .storybook 文件夹中。

但是，没有顺风。

是否有任何可遵循的方法或一些使用 nx、Angular、storybook 和 Tailwind 的运行示例？

使用nx版本13.8.3

非常感谢您的帮助！

Answer 1

在project.json（在您的库内）中，将“styles”数组添加到“build-storybook”目标：

"build-storybook": {
  "executor": "@nrwl/storybook:build",
  "outputs": ["{options.outputPath}"],
  "options": {
    "uiFramework": "@storybook/angular",
    "outputPath": "dist/storybook/angular",
    "styles": ["libs/<library_name>/src/styles.scss"], // <------ HERE
    "config": {
      "configFolder": "libs/<library_name>/.storybook"
    },
    "projectBuildConfig": "angular:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

在 styles.scss 内部：

@tailwind base;
@tailwind components;
@tailwind utilities;