fix: Storybook dev

.storybook/config.js → .storybook/config.ts

@@ -1,14 +1,12 @@
 import { configure, addDecorator } from '@storybook/react';
 import { withOptions } from '@storybook/addon-options';
 import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss';
-import './style.scss';
 
 addDecorator (
   withOptions ({
     name: 'wizard ui',
-    url: 'http://github.xsky.com/front-end/wizard',
+    url: 'https://github.com/xsky-fe/wizard-ui',
     sidebarAnimations: true,
-    sortStoriesByKind: true,
     // stories 根据字母，数组小到大排序，根据执行顺序排序
     sortStoriesByKind: true,
     showAddonPanel: false,

.storybook/webpack.config.js

@@ -2,9 +2,31 @@ const path = require('path')
 
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {
+  // Remove the existing css rule
+  config.module.rules = config.module.rules.filter(
+    f => f.test.toString() !== '/\\.css$/'
+  );
   config.module.rules.push({
-    test: /\.(css|scss)$/,
-    use: ['style-loader', 'css-loader', 'sass-loader'],
+    test: /\.css$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: `postcss-loader`,
+        options: {
+          options: {},
+        }
+      },
+    ],
+    include: path.resolve(__dirname, '../')
+  });
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'sass-loader',
+    ],
     include: path.resolve(__dirname, '../')
   });
   config.module.rules.push({

package.json

@@ -37,7 +37,7 @@
     "build-lib": "rm -rf lib && NODE_ENV=production babel src --out-dir lib --copy-file --extensions '.ts,.tsx' --env-name 'lib'",
     "build-dist": "rm -rf dist && NODE_ENV=production webpack",
     "tsc-types": "rm -rf types.d.ts && tsc -p ./ -t es2015 --emitDeclarationOnly --outFile types.d.ts",
-    "copy": "node scripts/build-copy.js",
+    "copy": "ts-node scripts/build-copy.ts",
     "build": "yarn build-dist && yarn build-esm && yarn build-lib && yarn copy",
     "storybook": "start-storybook -p 6006 -c .storybook",
     "build-storybook": "build-storybook -s ./stories/public -c .storybook -o build-stories",
@@ -56,6 +56,7 @@
     "@types/classnames": "^2.2.8",
     "@types/enzyme": "^3.9.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/fs-extra": "^8.0.0",
     "@types/jest": "^24.0.15",
     "@types/lodash": "^4.14.134",
     "@types/node": "12.0.2",
@@ -78,6 +79,7 @@
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
     "raw-loader": "^2.0.0",
     "react": "^16.8.6",
@@ -86,6 +88,7 @@
     "sass-loader": "^7.1.0",
     "terser-webpack-plugin": "^1.3.0",
     "ts-jest": "^24.0.2",
+    "ts-node": "^8.3.0",
     "typescript": "3.4.5",
     "webpack": "^4.37.0",
     "webpack-cli": "^3.3.6"

scripts/build-copy.js → scripts/build-copy.ts

@@ -1,18 +1,18 @@
-const fs = require('fs-extra')
+import fs from 'fs-extra';
 
-const filterFunc = (src, dest) => {
+const filterFunc = (src: string, dest:string):boolean => {
   if (src.includes('.tsx')) {
     return false
   }
   return true
 }
 fs.copy('src/style', 'esm/style')
-fs.copy('src/components', 'esm/components', { filter: filterFunc }, err => {
+fs.copy('src/components', 'esm/components', { filter: filterFunc }, (err: Error) => {
   if (err) return console.error(err)
   console.log('Copy to ems success!')
 })
 fs.copy('src/style', 'lib/style')
-fs.copy('src/components', 'lib/components', { filter: filterFunc }, err => {
+fs.copy('src/components', 'lib/components', { filter: filterFunc }, (err: Error) => {
   if (err) return console.error(err)
   console.log('Copy to lib success!')
 })