storybook相关功能

package.json版本介绍

{
  "name": "lh-ui-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@storybook/addon-essentials": "7.0.7",
    "@storybook/addon-interactions": "7.0.7",
    "@storybook/addon-links": "7.0.7",
    "@storybook/blocks": "7.0.7",
    "@storybook/react": "7.0.7",
    "@storybook/react-webpack5": "7.0.7",
    "@storybook/testing-library": "0.0.14-next.2",
    "@types/react": "^18.0.38",
    "@types/react-dom": "^18.0.11",
    "css-loader": "^6.7.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "prop-types": "15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "7.0.7",
    "style-loader": "^3.3.2",
    "typescript": "^5.0.4"
  },
  "options": {
    "craOverrides": {
      "fileLoaderExcludes": ["less"]
    }
  }
}

增加less功能（7.0.x版本）

1. 添加依赖

   yarn add -D css-loader less less-loader style-loader
   

2. .storybook/main.ts

   import type { StorybookConfig } from "@storybook/react-webpack5";
   const config: StorybookConfig = {
     stories: ["../packages/**/*.mdx", "../packages/**/*.stories.@(js|jsx|ts|tsx)"],
     addons: [
       "@storybook/addon-links",
       "@storybook/addon-essentials",
       "@storybook/addon-interactions",
     ],
     framework: {
       name: "@storybook/react-webpack5",
       options: {},
     },
     docs: {
       autodocs: "tag",
     },
     // 这一个要添加
     webpackFinal: async (config: any) => {
       config.module.rules.push({
         test: /\.less$/,
         use: [
           { loader: 'style-loader' },
           { loader: 'css-loader', options: { modules: false } },
           {
             loader: 'less-loader',
             options: { lessOptions: { javascriptEnabled: true } },
           },
         ],
       });
       return config;
     }
   };
   export default config;
   
   

3. 配置以上内容后7.0.x版本肯定可以使用less了

4. 以 import styles from ‘index.less’ 这种模式不得行哦~这是处理后的模式。本文只支持可使用less。

基于以上配置增加其他功能：

（1）storybook适配 @（如果你需要的话，可以更改 @ 指向其他目录，默认指向 src ）

import type { StorybookConfig } from '@storybook/react-webpack5';
const path = require('path')
const config: StorybookConfig = {
  stories: ['../src/components/**/*.mdx', '../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  webpackFinal: async (config: any) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { modules: false } },
        {
          loader: 'less-loader',
          options: { lessOptions: { javascriptEnabled: true } },
        },
      ],
    });
    return {
      ...config,
      // 添加 @ 指向src目录
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@': path.join(__dirname, '../src/')
        }
      }
    };
  }
};
export default config;