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;