如何使用 Storybook 配置 VueJS + PostCss + Tailwind

Question

任何人成功地使用 VueJS、PostCss 和 Tailwind 在 Storybook 中进行组件开发设置项目？

我已经走到这一步了：

1. 新建 vue 项目 (vue-cli 3.0.5)
2. @storybook/vue (4.0.0-alpha.25)
3. tailwindcss (0.6.5)
4. 使用<style lang="postcss"> ... </style>创建组件
5. 在样式块中使用 Tailwind @apply 将实用程序类应用于组件

我遇到的问题是，我为使用 lang="postcss" 创建故事的任何组件在运行故事书时都会在编译期间失败。

我尝试添加一个自定义 webpack 配置来停止错误，但我的组件都没有样式。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

我还尝试在stories.js 文件本身中导入我的app.postcss（导入tailwind），但无济于事。任何帮助将不胜感激。

Answer 1

我在这个 github repo https://github.com/jerriclynsjohn/svelte-storybook-tailwind 中有一个完整的 Svelte + TailwindCSS + Storybook 示例

但集成应该非常相似：

1. TailwindCSS 与您的 Vue 项目集成后，请继续操作。
2. 在您的 .storybook 文件夹中添加自定义 webpack.config.js 并添加以下内容：

const path = require('path');

module.exports = ({ config, mode }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: [
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: './.storybook/',
          },
        },
      },
    ],

    include: path.resolve(__dirname, '../storybook/'),
  });

  return config;
};

1. 在您的.storybook 文件夹中创建一个postcss.config.js，并使用以下内容：

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import')(),
    tailwindcss('./tailwind.config.js'), //This refers to your tailwind config
    require('autoprefixer'),
  ],
};

4. 在您的故事书文件夹中添加一个utils.css 文件

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

5. 在<>.stories.js 中引用您的 CSS 文件：

import '../../css/utils.css';

我真的建议你参考 github repo 中的实现，它也有特定于 Storybook 的东西。 (Github)

Answer 2

我以前从未（明确地）使用过 tailwindCSS 或 postCSS，所以我决定借此机会学习设置/配置这两者。

您可以在此处的故事书中找到带有 Tailwind 样式组件的完整示例：https://github.com/gurupras/vuejs-postcss-tailwind-with-storybook

步骤

• 设置VueJS项目：vue create vue-postcss-tailwind-storybook
• 安装并初始化tailwindCSS
  • npm install tailwindcss
  • ./node_modules/.bin/tailwind init（生成tailwind.config.js）
• 更新 postcss.config.js 以包含以下内容：

module.exports = {
  plugins: [
    require('tailwindcss')('tailwind.config.js'),
    require('autoprefixer')()
  ]
}

• 添加 Vue 故事书插件
  • vue add storybook
• 添加包含顺风指令的 CSS 文件（例如 src/style/tailwind.css）

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

• 可选将import '@/style/tailwind.css' 添加到您的main.js 以确保它们可用于您应用的所有部分
• 创建您的组件
  • 我将假设存在以下组件：src/components/alert.vue
• 设置您的故事

src/stories/alert.stories.js

/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'

// You need to import this once
import '@/style/tailwind.css'

import Alert from '@/components/alert.vue'

storiesOf('Alert', module)
  .add('with text', () => ({
    components: { Alert },
    template: '<Alert text="Test alert" :show-close="true"/>'
  }))

• 运行故事书npm run storybook:serve
• 在 storybook 上开发组件，同时使用 tailwindCSS！

希望这对您的设置有所帮助。同时，我将阅读并了解 TailwindCSS 如何帮助我创建更好的组件！

Answer 3

作为样板项目存储库的工作解决方案

在过去的几个月里，我在使用 Vue 配置 Storybook 时遇到了问题，但是我已经解决了这些问题，并在这里分享了一个工作样板项目存储库，其中包含您的特定要求以及一些额外的内容。

为此问题提供的赏金要求提供最新的解决方案。几天前进入测试版的最新 Storybook 版本 5.2 和 5.3 的问题是，即将推出两种新的故事语法格式：Component Story Format (CSF) 和 MDX Syntax。

Storybook 5.3 终于为这些格式带来了多框架支持，以及期待已久的 Storybook Docs 插件的初始版本。

但是，作为选择加入的格式/功能，这些当前未在 repo 中配置。如果需要，我可以在单独的分支中提供额外的设置。

所以这是工作的boilerplate project repository with Storybook 5.3 pre-release beta version using Tailwind CSS。

该项目配置了 Vue CLI 4 和 TypeScript 以及 Composition API 功能组件格式，为 计划于 2020 年第一季度末发布的 Vue 3.0 版本。

关于 PostCSS 和导入样式的注意事项

问题设置的主要问题是 PostCSS 不是一种语言，而是一种使用 JavaScript 转换 CSS 的工具，以及Vue CLI is already configured using PostCSS internally。

此外，问题和之前的答案还缺少样式，不仅需要在应用程序的 main.js / main.ts 文件中导入，而且还需要在 Storybooks 的主要 config.js 文件中导入。强>

初始设置步骤

# Check if Vue CLI is globally installed
vue --version

# If so, and if it's version is 3.x, uninstall it
npm uninstall -g @vue/cli
# OR if it was installed with Yarn
yarn global remove @vue/cli

# Need to use NPM insted of Yarn because in a later step
# we are installing a forked package from Github repo
# and it was not possible or as straightforward with Yarn.

# Install currently newest Vue CLI version 4
npm install -g @vue/cli

# Create app
vue create boilerplate-ts-vue-storybook-tailwind-postcss --packageManager npm

# Project bootstrapping options chosen for the project
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

#  Go into the directory just created
cd boilerplate-typescript-vue-storybook-tailwind-postcss

# Add Vue Cli Storybook plugin from a forked repo with Storybook 5.3.0-beta.2
npm install -D git+https://git@github.com/ux-engineer/vue-cli-plugin-storybook.git#v0.6.2

# Run the plugin's installer
vue add storybook --packageManager npm

项目配置和其余步骤

可以从 repo 的 commit history 中查找所做的其余更改。

资源

对于使用 Vue 设置 Tailwind，我建议您关注 Markus Oberlehner 关于该主题的精彩文章系列：

Setting up Tailwind CSS with Vue.js

Removing unused CSS from Tailwind with PurgeCSS

Reusable Functional Vue.js Components with Tailwind CSS

Thoughts about Utility-First CSS Frameworks

Adam Wathan - Tailwind CSS Best Practice Patterns