角色

开发时实时预览，开发后的项目文档

添加storybook

$ npx sb init

在开发环境运行storybook

$ npm run storybook

webpack配置

在webpackFinal 中配置webpack

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Return the altered config
    return config;
  },
};

添加sass

添加依赖

$ npm install css-loader sass-loader sass webpack style-loader --save-dev

添加webpack配置

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

报错

vue没有安装

错误：

ERR! Error: Cannot find module 'vue/dist/vue.esm-bundler.js'
ERR! Require stack:
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core/server.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:94:19)
ERR!     at Object.webpack (/Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js:43:23)
ERR!     at /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!     at async Object.start (/Users/chan/program/chan-ui/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:95:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR!     at async buildDevStandalone (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR!     at async buildDev (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
ERR!  Error: Cannot find module 'vue/dist/vue.esm-bundler.js'
ERR! Require stack:
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/core/server.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/index.js
ERR! - /Users/chan/program/chan-ui/node_modules/@storybook/vue3/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:94:19)
ERR!     at Object.webpack (/Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js:43:23)
ERR!     at /Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!     at async Object.start (/Users/chan/program/chan-ui/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:95:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR!     at async buildDevStandalone (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR!     at async buildDev (/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/core/server.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/vue3/dist/cjs/server/index.js',
ERR!     '/Users/chan/program/chan-ui/node_modules/@storybook/vue3/bin/index.js'
ERR!   ]
ERR! }

原因：查看node_modules，没有安装vue模块 解决方案：找到node_modules/@storybook，查看package.json中vue的版本，然后添加到根目录目录

// package.json
{
  "devDependencies": {
    "vue": "^3.0.0",
  },
}