From 6b5eed645431d8c3c24bf4219cbf19a4d86aa5ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=98=E5=8F=8B?= Date: Sun, 18 Jun 2017 00:21:45 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B7=BB=E5=8A=A0=20password=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/webpack.config.dev.js | 39 +- config/webpack.config.prod.js | 39 +- package.json | 2 + public/index.html | 2 +- src/App.css | 24 - src/App.tsx | 19 +- src/components/password/index.tsx | 1 + .../password/password.component.styl | 24 + .../password/password.component.tsx | 139 + src/index.tsx | 14 +- src/registerServiceWorker.ts | 26 +- tslint.json | 12 +- yarn.lock | 5304 +++++++++++++++++ 13 files changed, 5577 insertions(+), 68 deletions(-) delete mode 100644 src/App.css create mode 100644 src/components/password/index.tsx create mode 100644 src/components/password/password.component.styl create mode 100644 src/components/password/password.component.tsx create mode 100644 yarn.lock diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 8719259..b3001c9 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -83,9 +83,9 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'], + extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', 'styl'], alias: { - + // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', @@ -141,6 +141,7 @@ module.exports = { /\.(js|jsx)(\?.*)?$/, /\.(ts|tsx)(\?.*)?$/, /\.css$/, + /\.styl$/, /\.json$/, /\.bmp$/, /\.gif$/, @@ -204,6 +205,40 @@ module.exports = { }, ], }, + { + test: /\.styl$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options + sourceMap: true, + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + { + loader: require.resolve('stylus-loader') + } + ], + }, // ** STOP ** Are you adding a new loader? // Remember to add the new extension(s) to the "url" loader exclusion list. ], diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 0e801a7..a4c7437 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -81,9 +81,9 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'], + extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', '.styl'], alias: { - + // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', @@ -132,6 +132,7 @@ module.exports = { /\.(js|jsx)$/, /\.(ts|tsx)$/, /\.css$/, + /\.styl$/, /\.json$/, /\.bmp$/, /\.gif$/, @@ -211,6 +212,40 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + { + test: /\.styl$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options + sourceMap: true, + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + { + loader: require.resolve('stylus-loader') + } + ], + }, // ** STOP ** Are you adding a new loader? // Remember to add the new extension(s) to the "file" loader exclusion list. ], diff --git a/package.json b/package.json index 530163d..de003a1 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "react-error-overlay": "^1.0.6", "source-map-loader": "^0.2.1", "style-loader": "0.17.0", + "stylus": "^0.54.5", + "stylus-loader": "^3.0.1", "sw-precache-webpack-plugin": "0.9.1", "ts-loader": "^2.0.3", "tslint": "^5.2.0", diff --git a/public/index.html b/public/index.html index 7bee027..26754ea 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + React Password