feat: adjust base of storybook

Author: linspw

configs/webpack/alias-config.js renamed to configs/project/alias-config.js

@@ -6,6 +6,7 @@ exports.alias = {
   '@': path.resolve(baseUrl, 'src'),
   '@root': path.resolve(baseUrl),
   '@api': path.resolve(baseUrl, 'src/api'),
+  '@assets': path.resolve(baseUrl, 'src/assets'),
   '@styles': path.resolve(baseUrl, 'src/styles'),
   '@components': path.resolve(baseUrl, 'src/components'),
   '@layouts': path.resolve(baseUrl, 'src/layouts'),

configs/webpack/rules-config.js renamed to configs/project/rules-config.js

@@ -5,6 +5,15 @@ if (process.env.npm_lifecycle_event.search('storybook') < 0) {
     test: /\.vue$/,
     loader: 'vue-loader',
   });
+  rules.push({
+    test: /\.(png|jp(e*)g|svg|gif)$/,
+    use: ['file-loader'],
+  });
+} else {
+  rules.push({
+    test: /\.svg$/,
+    use: ["@svgr/webpack", "url-loader"],
+  });
 }
 
 rules.push({
@@ -22,9 +31,4 @@ rules.push({
   ],
 });
 
-rules.push({
-  test: /\.(png|jp(e*)g|svg|gif)$/,
-  use: ['file-loader'],
-});
-
 exports.rules = rules;

configs/.storybook/helper.js renamed to configs/storybook/helper.js

@@ -1,5 +1,5 @@
-const { rules } = require("../webpack/rules-config");
-const { alias } = require("../webpack/alias-config");
+const { rules } = require("../project/rules-config");
+const { alias } = require("../project/alias-config");
 
 module.exports = {
   stories: [
@@ -17,6 +17,11 @@ module.exports = {
     builder: "webpack5",
   },
   webpackFinal: async (config) => {
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => !Array.isArray(rule.test) && rule.test.test(".svg"),
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+
     config.module.rules = [...config.module.rules, ...rules];
 
     config.resolve.alias = { ...config.resolve.alias, ...alias };

configs/.storybook/main.js renamed to configs/storybook/main.js

@@ -9,7 +9,7 @@
   "scripts": {
     "build:lib": "rollup -c",
     "test:unit": "jest",
-    "dev:storybook": "start-storybook -p 6006 -c configs/.storybook",
+    "dev:storybook": "start-storybook -p 6006 -c configs/storybook",
     "build:storybook": "build-storybook -o dist/storybook",
     "semantic-release": "semantic-release"
   },
@@ -19,7 +19,6 @@
     "dist/lib/*"
   ],
   "dependencies": {
-    "url-join": "^4.0.1",
     "vue-prop-validation-helper": "^3.0.0"
   },
   "peerDependencies": {
@@ -31,6 +30,7 @@
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
@@ -61,12 +61,14 @@
     "param-case": "^3.0.4",
     "rollup": "^2.67.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "3",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.46.0",
     "sass-loader": "^12.4.0",
     "semantic-release": "^18.0.1",
     "storybook-design-token": "^1.4.0",
     "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1",
     "vue": "^3.2.26",
     "vue-loader": "^17.0.0",
     "vue-style-loader": "^4.1.3",

configs/.storybook/preview-head.html renamed to configs/storybook/preview-head.html

@@ -1,6 +1,9 @@
 import vue from "rollup-plugin-vue";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
+import RollupAlias from "@rollup/plugin-alias";
+const { alias } = require("./configs/.project/alias-config");
+import scss from "rollup-plugin-scss";
 
 export default [
   {
@@ -15,6 +18,12 @@ export default [
         file: "dist/lib/core-ui.js",
       },
     ],
-    plugins: [vue(), peerDepsExternal(), nodeResolve()],
+    plugins: [
+      vue(),
+      peerDepsExternal(),
+      nodeResolve(),
+      RollupAlias({ entries: alias }),
+      scss(),
+    ],
   },
 ];