如何使用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. @apply在样式块内使用Tailwind 将实用程序类应用于组件

我遇到的问题是，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. webpack.config.js在您的.storybook文件夹中添加自定义并添加以下内容：

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. 使用以下内容postcss.config.js在您的.storybook文件夹中创建一个：

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在您的故事书文件夹中添加一个文件

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

5. 在以下位置引用您的 CSS 文件<>.stories.js：

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以确保它们可用于您的应用程序的所有部分
• 创建您的组件
  • 我将假设存在以下组件： 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"/>'
  }))

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

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