如何在Storybook中配置VueJS + PostCss + Tailwind？

Question

如何在Storybook中配置VueJS + PostCss + Tailwind？

javascriptvue.jsvue-clistorybooktailwind-css

15

有人成功使用VueJS、PostCss和Tailwind设置项目，并在Storybook中进行组件开发吗？

我已经完成了以下步骤：

新建vue项目（vue-cli 3.0.5）
@storybook/vue (4.0.0-alpha.25)
tailwindcss (0.6.5)
使用<style lang="postcss"> ... </style>创建组件
在样式块中使用Tailwind @apply将效用类应用于组件

我遇到的问题是，当运行storybook时，使用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），但是没有成功。希望能得到帮助。

我已经尝试将我的 app.postcss 文件（其中导入了 tailwind）导入到 stories.js 文件本身中，但无济于事。希望能得到帮助。

- Geoffrey Richey

Arpad Gabor，你能否请仔细查看我的解决方案，因为它应该是对问题的详尽回答。 - ux.engineer

3个回答

6

我以前从未使用过tailwindCSS或postCSS（明确地），所以我决定利用这个机会学习如何设置/配置它们。

你可以在storybook中找到一个使用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
设置您的故事

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"/>'
  }))

运行 Storybook npm run storybook:serve
在 Storybook 上开发您的组件，并可使用 TailwindCSS！

希望这可以帮助您进行设置。与此同时，我将阅读并了解如何使用 TailwindCSS 创建更好的组件！

- Guru Prasad

0

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

在过去的几个月中，我一直在配置Vue的Storybook时遇到问题，但是我已经解决了这些问题，并在此分享一个具有您特定要求和一些额外功能的工作样板项目存储库。

对于这个问题提供的赏金要求一个最新的解决方案。然而，最新的Storybook版本5.2和5.3，仅在几天前进入beta版，有两种新的故事语法格式即将推出：组件故事格式（CSF）和MDX语法。

Storybook 5.3终于为这些格式带来了多框架支持，以及长期期待的Storybook Docs插件的首次发布。

然而，作为选择加入的格式/功能，它们目前尚未在存储库中进行配置。如果需要，我可以提供单独分支的其他设置。

这里是使用Tailwind CSS的Storybook 5.3预发布beta版本的样板项目存储库。

该项目配置了Vue CLI 4和TypeScript，以及Composition API函数组件格式，为即将到来的Vue 3.0版本（目标发布时间为2020年第一季度末）做好了未来准备。

关于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

项目配置和其他步骤

其余更改可以从存储库的提交历史中查看。

资源

为了在Vue中设置Tailwind，我建议您遵循Markus Oberlehner关于此主题的精美文章系列：

使用Vue.js设置Tailwind CSS

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

使用Tailwind CSS创建可重用的功能性Vue.js组件

有关实用优先的CSS框架的想法

Adam Wathan - Tailwind CSS 最佳实践模式

- ux.engineer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jerric Lyns John · Accepted Answer

我已经在这个Github存储库中拥有了一个完全可用的Svelte + TailwindCSS + Storybook示例：https://github.com/jerriclynsjohn/svelte-storybook-tailwind

但是集成过程应该非常类似：

一旦TailwindCSS与您的Vue项目集成，然后按照以下步骤执行。
在您的.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;
};

在您的.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'),
  ],
};

在你的storybook文件夹中添加一个utils.css文件。

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

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

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

我非常推荐您参考 Github 仓库中的实现，它还包含一些特定于 Storybook 的东西。（Github）