如何使用 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, '../')
            }
        ]
    }
}

我也试着输入我的app.postcss （其中进口顺风）的内stories.js文件本身无济于事。 任何帮助，将不胜感激。

Answer 1

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

但是 Integrating 应该非常相似：

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;
};

3. 在您的.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
• 添加包含 tailwind 指令的 CSS 文件（例如src/style/tailwind.css ）

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

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

源代码/故事/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"/>'
  }))

• 运行 storybook npm run storybook:serve
• 在使用 tailwindCSS 的同时在 storybook 上开发您的组件！

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

Answer 3

我不知道您为什么在lang <style lang="postcss"> ... </style>添加了postcss

您应该只添加<style lang="css"> ... </style>

postcss不是一种语言，它是一个解析CSS的webpack插件

Answer 4

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

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

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

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

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

所以这是使用 Tailwind CSS 的 Storybook 5.3 预发布测试版的工作样板项目存储库。

该项目使用Vue CLI 4和TypeScript以及Composition API功能组件格式进行配置，作为即将于 2020 年第一季度末发布的 Vue 3.0 版本的未来证明。

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

问题设置的主要错误在于PostCSS 不是一种语言，而是一种用 JavaScript 转换 CSS 的工具，并且Vue CLI 已经在内部使用 PostCSS 进行了配置。

此外，问题和之前的答案中还缺少样式，不仅需要在应用程序的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's commit history 中查找。

资源

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

使用 Vue.js 设置 Tailwind CSS

使用 PurgeCSS 从 Tailwind 中删除未使用的 CSS

带有 Tailwind CSS 的可重用功能性 Vue.js 组件

关于实用优先的 CSS 框架的思考

Adam Wathan - Tailwind CSS 最佳实践模式