From 60e40dc235519808e15353efca9705c60364f148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=BC=80=E6=9C=97?= Date: Fri, 26 Jul 2019 15:48:52 +0800 Subject: [PATCH] fix: Storybook dev --- .storybook/{addons.js => addons.ts} | 0 .storybook/{config.js => config.ts} | 4 +--- .storybook/style.scss | 3 --- .storybook/webpack.config.js | 26 ++++++++++++++++++++++-- package.json | 5 ++++- scripts/{build-copy.js => build-copy.ts} | 8 ++++---- 6 files changed, 33 insertions(+), 13 deletions(-) rename .storybook/{addons.js => addons.ts} (100%) rename .storybook/{config.js => config.ts} (88%) delete mode 100644 .storybook/style.scss rename scripts/{build-copy.js => build-copy.ts} (76%) diff --git a/.storybook/addons.js b/.storybook/addons.ts similarity index 100% rename from .storybook/addons.js rename to .storybook/addons.ts diff --git a/.storybook/config.js b/.storybook/config.ts similarity index 88% rename from .storybook/config.js rename to .storybook/config.ts index 13372e84..c98524f3 100644 --- a/.storybook/config.js +++ b/.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, diff --git a/.storybook/style.scss b/.storybook/style.scss deleted file mode 100644 index 5e588988..00000000 --- a/.storybook/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.story-content { - padding: 20px; -} \ No newline at end of file diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index af7db8f9..acec67b8 100644 --- a/.storybook/webpack.config.js +++ b/.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({ diff --git a/package.json b/package.json index fc56d4ba..2407fbc2 100644 --- a/package.json +++ b/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" diff --git a/scripts/build-copy.js b/scripts/build-copy.ts similarity index 76% rename from scripts/build-copy.js rename to scripts/build-copy.ts index fecbaf25..bae339a5 100644 --- a/scripts/build-copy.js +++ b/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!') })