I have done everything in accordance with the docs.
I installed storybook, and then I changed the config file the way they say has to be done to make storybook work on Vite, which supports the element-plus library.
.storybook/main.js:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
core: {
builder: '@storybook/builder-vite', // 👈 The builder enabled here.
},
}
Package.json:
{
"name": "elementui-practice",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"element-plus": "^2.2.17",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"vue": "^3.2.38"
},
"devDependencies": {
"@babel/core": "^7.19.1",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-essentials": "^6.5.12",
"@storybook/addon-interactions": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
"@storybook/builder-vite": "^0.2.2",
"@storybook/testing-library": "^0.0.13",
"@storybook/vue3": "^6.5.12",
"@vitejs/plugin-vue": "^3.0.3",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-vue": "^9.5.1",
"sass": "^1.55.0",
"vite": "^3.0.9",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-loader": "^16.8.3"
}
}
If I run only the element-plus (npm run dev), the library works.
If I run npm run storybook, element-plus styles are not applied to the components or elements. Normal css works, but element-plus components and styles do not work.
Add these code to storybook's preview.js
import { app } from '@storybook/vue3'; //I use Vue3
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ElementPlus);