동화책 꼬리바람.스토리북에 순풍을 추가하는 방법
나는 동화책에 순풍을 더하고 싶다.스토리가 웹에서 렌더링되는 것과 동일하게 렌더링됩니다.
나는 사용했다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.filename 파일을 작성할 필요도 없었습니다.그래서 나는 지금 무엇을 해야 할지 혼란스럽다.
알기 쉽게 하기 위해 아래에 몇 가지 구성 파일을 포함합니다.
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"
]
}
Storybook은 (커스터마이즈에 의존하지 않고) 앞으로를 사용하여 Post CSS 설정을 커스터마이즈할 것을 권장합니다.postcss-loader):
설치에 포스트 CSS 애드온 추가
npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcss프로젝트 루트에 를 만듭니다.
// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }플러그 인을 에
.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'), }, }, }, ], };에서 css 파일을 Import 합니다.
.storybook/preview.js// .storybook/preview.js import '../src/styles.css';
거의 다 왔어.
설정에는 미비한 부분이 있습니다.웹 팩 설정을 추가하여 순풍을 적용합니다.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 [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"
}
tailwind.config.syslog
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.disples
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
.storybook/main.book
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/책.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$/,
},
},
}
정답은 맞지만 최신 CRA에서는 다음과 같이 설정해야 합니다.
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
include: path.resolve(__dirname, "../"),
});
사내의 답변과 비슷하지만, 추가 서비스를 원하지 않는 경우 다음과 같은 해결책이 있습니다.postcss.config.js(로더가 postcss.config.ts를 선택하지 않기 때문에) 몇 줄만 또는 모든 것에 typescript를 사용하는 경우
- 공식 포스트 CSS 애드온 추가
npm i -D @storybook/addon-postcss
yarn add -D @storybook/addon-postcss
- 설정 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
이 문제는 나에게도 두통을 주었다.StackOverflow와 Github에서 찾을 수 있는 모든 솔루션을 추적했습니다.
단, tailwind-CLI를 실행하여 global.css 파일을 작성하여 Import함으로써 "수정"할 수 있었습니다../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
언급URL : https://stackoverflow.com/questions/65495912/storybook-tailwind-how-should-i-add-tailwind-to-storybook
'programing' 카테고리의 다른 글
| Gradle에서 BuildProperties bean 자동 배선 - NoSch BeanDefinition예외. (0) | 2023.03.25 |
|---|---|
| Intelij, 타겟 JRE vesion이 프로젝트 jdk 버전과 일치하지 않습니다. (0) | 2023.03.25 |
| wordpress is_home() | is_index()가 가능합니까? (0) | 2023.03.25 |
| 리액트-라우터 1개만 자녀 (0) | 2023.03.25 |
| JSON 시리얼화 불가 (0) | 2023.03.25 |