feat: change build setting of storybook

.storybook/base/base.js

@@ -30,15 +30,42 @@ function getAddons() {
     return addons;
 }
 
+const commonAlias = {
+    '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
+    '@douyinfe/semi-icons': resolve('packages/semi-icons/src'),
+    '@douyinfe/semi-ui': resolve('packages/semi-ui'),
+    '@douyinfe/semi-theme-default': resolve('packages/semi-theme-default'),
+    '@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src'),
+    '@douyinfe/semi-animation': resolve('packages/semi-animation'),
+    '@douyinfe/semi-animation-react': resolve('packages/semi-animation-react'),
+    '@douyinfe/semi-animation-styled': resolve('packages/semi-animation-styled')
+};
+
 module.exports = {
     framework: {
         // name: "@storybook/react-webpack5",
-        name: "storybook-react-rspack",
+        // name: "storybook-react-rspack",
+        name: process.env.BUILD_ENV === 'rspack' ? "storybook-react-rspack" : '@storybook/react-webpack5',
         options: {
             fastRefresh: true
         },
     },
     addons: getAddons(),
+    rspackFinal(config) {
+        config.module.rules.push(
+            {
+                test: /\.s(a|c)ss$/,
+                include: [resolve('packages/semi-ui'), resolve('packages/semi-foundation'), resolve('packages/semi-icons')],
+                use: [{ loader: 'sass-loader' }, { loader: resolve('packages/semi-webpack/lib/semi-theme-loader.js') }],
+                type: 'css'
+            }
+        );
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            ...commonAlias,
+        };
+        return config;
+    },
     webpackFinal: async (config) => {
         const rules =
             (config.module.rules &&
@@ -66,16 +93,7 @@ module.exports = {
         config.module.rules = rules;
         config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
         config.resolve.symlinks = false;
-        config.resolve.alias = {
-            '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
-            '@douyinfe/semi-icons': resolve('packages/semi-icons/src'),
-            '@douyinfe/semi-ui': resolve('packages/semi-ui'),
-            '@douyinfe/semi-theme-default': resolve('packages/semi-theme-default'),
-            '@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src'),
-            '@douyinfe/semi-animation': resolve('packages/semi-animation'),
-            '@douyinfe/semi-animation-react': resolve('packages/semi-animation-react'),
-            '@douyinfe/semi-animation-styled': resolve('packages/semi-animation-styled')
-        };
+        config.resolve.alias = commonAlias;
         config.devtool = 'source-map';
 
         return config;

.storybook/js/main.js

@@ -2,10 +2,12 @@ const config = require('../base/base');
 const utils = require('../base/utils');
 const nycConfig = require('../../nyc.config');
 
+const storiesSuffix = process.env.BUILD_ENV === 'rspack' ? '{js,jsx}' : '(js|jsx)'; // rspack, webpack
+
 module.exports = {
   ...config,
   "stories": [
-    '../../packages/semi-ui/**/_story/*.stories.(js|jsx)',
+    `../../packages/semi-ui/**/_story/*.stories.${storiesSuffix}`,
   ],
   typescript: {
     check: false,

package.json

@@ -14,8 +14,9 @@
         "pre-develop": "npm run scripts:changelog && node ./scripts/designToken.js ./static/designToken.json",
         "develop": "npm run pre-develop && gatsby clean && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design && gatsby develop -H 0.0.0.0 --port=3666 --verbose",
         "scripts:changelog": "node scripts/changelog.js",
-        "start": "npm run story",
+        "start": "BUILD_ENV=rspack npm run story",
         "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rimraf ./lib && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
+        "story:w": "BUILD_ENV=webpack npm run story",
         "story": "npm run pre-story && sb dev -c ./.storybook/js/ -p 6006",
         "story:ts": "npm run pre-story && sb dev -c ./.storybook/ts/ -p 6007",
         "story:ani": "npm run pre-story && sb dev -c ./.storybook/animation/react -p 6008",