cra 로 TS 프로젝트 만들고.
rm -rf node_modules
yarn set version berry
yarn install
yarn --version
> 얀베리 3.2.0
1043 npx sb init --type react -f
...
1047 npx sb@next automigrate
...
https://github.com/storybookjs/eslint-plugin-storybook#usage 참고 다 적용.
...
1052 yarn add core-js
1053 yarn storybook
---
"@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9",
- "autoprefixer": "^10.4.4",
+ "autoprefixer": "9.8.6",
"babel-loader": "^8.2.2",
- "babel-plugin-macros": "^3.1.0",
- "babel-plugin-twin": "^1.0.2",
"daisyui": "^2.11.0",
"postcss": "^8.4.12",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.1",
- "tailwindcss": "^2.2.15",
+ "tailwindcss": "^3.0.23",
"terser-webpack-plugin": "^5.3.1",
"typescript": "^4.4.3",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
},
"devDependencies": {
+ "@mdx-js/react": "^1.6.22",
+ "@storybook/addon-actions": "^6.4.19",
+ "@storybook/addon-docs": "^6.4.19",
+ "@storybook/addon-essentials": "^6.4.19",
+ "@storybook/addon-links": "^6.4.19",
+ "@storybook/addon-postcss": "^2.0.0",
+ "@storybook/react": "^6.4.19",
+ "@storybook/testing-library": "^0.0.9",autoprefixer 버전이 10버전에서 참조 패키지에 문제가 있어 9버전을..
+const tailwindcss = require('tailwindcss');
+
module.exports = {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
+ plugins: [
+ tailwindcss('./tailwind.config.js'),
+ require('autoprefixer'),
+ ]
};const path = require('path');
const path = require("path");
const tailwindcss = require("tailwindcss");
...
{
test: /\.s?css$/,
loaders: [
// Loader for webpack to process CSS with PostCSS
{
loader: 'postcss-loader',
options: {
/*
Enable Source Maps
*/
sourceMap: true,
/*
Set postcss.config.js config path && ctx
*/
config: {
path: './.storybook/',
},
},
}],
include: path.resolve(__dirname, '../'),
}
*끝.