javascript - 如何使用 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在样式 block 中将实用程序类应用于组件

我遇到的问题是，我创建的所有组件都使用 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 (进口 tailwind)在 stories.js 内文件本身无济于事。任何帮助将不胜感激。

Answer 1

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

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

1. 创建 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'),
  ],
};

1. 添加 utils.css文件在你的故事书文件夹中

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

1. 在 <>.stories.js 中引用您的 CSS 文件:

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

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