故事书-顺风。我应该如何添加到故事书的顺风

我想添加到故事书的顺风。这样故事将渲染就像它将在网络上渲染。

我使用 create-react-app project-name --template typescript创建了这个项目。

然后，为了安装顺风，我按照 https://tailwindcss.com/docs/guides/create-react-app的指示从文档的顺风。

一旦我完成了它，我运行代码 npm sb init。这确保故事书运行。

现在我需要告诉故事书使用尾风造型。但我不知道如何。

我看到的其他答案都告诉我要编辑 postcss.config.js文件。

但是我遵循了这个 https://tailwindcss.com/docs/guides/create-react-app文档，在这里我甚至不需要创建 postcss.config.js 文件。所以我现在不知道该怎么办。

为了清楚起见，我将在下面包含一些配置文件。

craco.config.js

module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}

.storybook/preview.js

import "../src/index.css"


export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}

.storybook/main.js

module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app"
]
}

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],


darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

package.json

`{
"name": "memory",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.0.0",
"@tailwindcss/postcss7-compat": "^2.0.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.35",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-essentials": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/node-logger": "^6.1.11",
"@storybook/preset-create-react-app": "^3.1.5",
"@storybook/react": "^6.1.11"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
41512 次浏览
小开

你就快到了。

您的配置中缺少的一部分是添加一个 webpack 配置，以便向 postcss-loader应用顺风:

const path = require('path')


module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
include: path.resolve(__dirname, '../'),
})
return config
},
}
小开

答案是正确的，但在最新的 CRA 中，我必须这样配置:

config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
include: path.resolve(__dirname, "../"),
});
小开
最佳答案

童话书 建议从现在开始使用 @storybook/addon-postcss定制 postCSS 配置(而不是依赖于定制 postcss-loader) :

  1. 将 postCSS 插件添加到您的安装中

    npm i -D @storybook/addon-postcss     # or
yarn add -D @storybook/addon-postcss

  2. 在项目根目录中创建 postcss.config.js

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

  3. 将插件添加到 .storybook/main.js

    // .storybook/main.js
module.exports = {
...
addons: [
...
{
name: '@storybook/addon-postcss',
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use @import('./other-styles.css')
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require('postcss'),
},
},
},
],
};

  4. 在 .storybook/preview.js中导入 css 文件

    // .storybook/preview.js
import '../src/styles.css';
小开

与 ofhouse 的答案类似，但是如果您不想只用几行代码就有一个额外的 postcss.config.js，或者如果您想在所有内容中都使用类型脚本(因为加载程序不接收 postcss.config.ts) ，这里有一个解决方案

  1. 添加正式的 postCSS 插件
npm i -D @storybook/addon-postcss
yarn add -D @storybook/addon-postcss
  1. Config main.ts & tailwind.Config.ts
/* .stories/main.ts */


import postcss from 'postcss';
import * as tailwindcss from '../tailwind.config';


import type { StorybookConfig } from '@storybook/react/types';


export const addons: StorybookConfig['addons'] = [
// other addons,
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: postcss,
postcssOptions: {
plugins: {
tailwindcss, // or you can nest your options entirely here
autoprefixer: {
// autoprefixer options
},
},
},
},
},
},
];

/* tailwind.config.ts */


import type { TailwindConfig } from 'tailwindcss/tailwind-config';


export const theme: TailwindConfig['theme'] = {
// theme options
}


// other options
小开

《尾风故事书》[2022-2023(希望如此)]

包裹 Json

"devDependencies": {
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/node-logger": "^6.5.9",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",
"@typescript-eslint/eslint-plugin": "^5.28.0",
"@typescript-eslint/parser": "^5.28.0",
"autoprefixer": "^10.4.7",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.17.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.1",
"webpack": "^5.73.0"
}

Config.js

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Postcss.config.js

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

. Storybook/main.js

module.exports = {
stories: [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: "@storybook/react",
core: {
"builder": "@storybook/builder-webpack5"
}
}

. Storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';


export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
小开

这个问题也让我头疼，我跟踪了 StackOverflow 和 Github 上能找到的所有解决方案。

但是我只能通过运行 tailwind-CLI 并构建 global.css 文件并将其导入到 ./storybook/preview.js来“修复它”

这是使用的 cli 命令。

npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch

然后从上面命令的输出路径(- o 标志)导入它。

// ./storybook/preview.js


import './global.css';


...
小开

我已经尝试了以上所有的答案，但不幸的是，我仍然得到一些奇怪的 unknown word错误时，运行故事书。

这是我唯一的解决办法: Https://github.com/storybookjs/addon-postcss/issues/33#issuecomment-1173042151


提交答案