时间戳

首页 > 解决方案 > 如何使用 Storybook 配置 VueJS + PostCss + Tailwind

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

问题描述

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

我已经做到了这一点：

  1. 新vue项目 ( vue-cli 3.0.5)
  2. @storybook/vue (4.0.0-alpha.25)
  3. 尾风css (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无济于事。任何帮助，将不胜感激。

标签： javascriptvue.jsvue-clistorybooktailwind-css

解决方案

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

但是集成应该非常相似：

  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. 在以下位置引用您的 CSS 文件<>.stories.js：
import '../../css/utils.css';

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

推荐阅读