React+ts+less+storybook的组件项目相关配置及其内容

使用create-react-app创建react项目

本地已有create-react-app

终端命令，脚手架生成react项目

create-react-app react-storybook-ts --template typescript

本地没有create-react-app

终端命令，脚手架生成react项目

npx create-react-app react-storybook-ts --template typescript

生成完项目后，cd到该文件夹

配置less样式（暴露webpack配置文件）

该方法通过暴露webpack配置文件来配置less
暴露配置文件
这里注意不要改动刚生产的项目，可能会造成无法eject
终端命令

npm run eject 

终端安装依赖

yarn add less less-loader --save-dev

在刚刚拉取出来的config文件件下面找到webpack.config.js（webpack配置文件，不同版本的webpack会有不同的名称，只要找到配置文件即可）
添加相关代码

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
	test: lessRegex,
	exclude: lessModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 3,
			sourceMap: isEnvProduction
				? shouldUseSourceMap
				: isEnvDevelopment,
			modules: {
				mode: 'icss',
			},
		},
		'less-loader'
	),
	sideEffects: true,
},

{
	test: lessModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 3,
            sourceMap: isEnvProduction
            	? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                mode: 'local',
                getLocalIdent: getCSSModuleLocalIdent,
           	},
        },
        'less-loader'
	),
},

具体位置如下代码

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },
                 // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.

在项目中添加storybook

下载初始化storybook

终端命令

npx storybook init

运行启动storybook

下载成功后终端命令启动storybook

yarn storybook

注：在这个版本的教程中，将使用 yarn 来运行大多数命令。 如果你已经安装了 Yarn，但更偏向使用 npm 替代，只需要在上面的命令后添加 --use-npm 标志，CRA 和 Storybook 都将基于此初始化。并且在完成本教程时不要忘记调整其中的命令为 npm 中对应的命令。

storybook配置less

在该项目的.storybook文件夹下的mian.ts文件
如图可以看到目录，及其需要修改的代码

mian.ts代码如下

import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@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;

此时配置组件的时候，引用less文件就不会报错了。

storybook配置别名

main.ts文件代码如下

import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@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;