15

任何人都成功地使用 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无济于事。任何帮助，将不胜感激。

4

3 回答 3

8

我在这个 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 )

于 2019-09-01T10:22:35.430 回答
6

我以前从未使用过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
  • 添加一个包含顺风指令的 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"/>'
  }))
  • 运行故事书npm run storybook:serve
  • 在使用 tailwindCSS 的同时在 storybook 上开发您的组件！

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

于 2019-11-18T23:54:42.720 回答
0

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

在过去的几个月里，我在使用 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 的提交历史中查找其余的更改。

资源

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

使用 Vue.js 设置 Tailwind CSS

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

使用 Tailwind CSS 的可重用函数式 Vue.js 组件

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

Adam Wathan - Tailwind CSS 最佳实践模式

于 2019-11-20T10:45:08.860 回答