本文介绍了未在Storybook版本中显示的顺风CSS类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用顺风CSS来构建我的故事书。当运行build-storybook时,组件使用顺风类呈现。遗憾的是,当我构建故事书并使用npx http-server storybook-static运行Create Buildstorybook-static时,类没有加载到故事中,并且组件显示为未设置样式。

这是我的项目的复制品:https://gitlab.com/ens.evelyn.development/storybook-issue

这是我的main.js

    const path = require('path')

module.exports = {
  "stories": [
    "../src/components/**/**/*.stories.mdx",
    "../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },        
   "@storybook/addon-actions",
    "storybook-tailwind-dark-mode"
  ]}

我的项目结构如下:

.storybook 
src
  components 
     subdir
       Button
         index.tsx
         button.stories.js 
  styles
    index.css (<-- tailwindcss file)

我们非常感谢您的任何提示或建议。

推荐答案

更新:我的原始答案可能对其他人有用,因此我将其留作参考。但是,在本例中,问题出在Teswind.config.js中。

更改

purge: {
    mode: 'all',
    content: [
      './src/components/**/**/*.{ts, tsx}'
    ],
  },

purge: ['./src/**/*.{js,jsx,ts,tsx}'],

原创:

我刚刚对其进行了测试,并按照预期构建了故事书。我认为我们配置中的关键区别在于我没有在main.js中更改StoryBook的webpack配置。相反,我使用的是@storybook/addon-postcssfor postcss@^8(顺风@^2需要):

// main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
};

我在postcss.config.js(在我的项目根目录中)中指定了必要的插件:

// postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

还值得注意的是,我通过自己的css文件直接在Storybook的preview.js中导入TailWind:

// preview.js
import 'tailwindcss/tailwind.css';
export const parameters = {...}

希望,做出这些更改将使TailWind为您工作。

作为比较(参见下面的注释),以下是My Build Storybook-Static目录的内容:

这篇关于未在Storybook版本中显示的顺风CSS类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-25 08:19