From 0d769f9f68d850d098fb824713c956b1f0472817 Mon Sep 17 00:00:00 2001 From: Alain Jacomet Date: Sun, 14 Jan 2018 10:07:16 -0300 Subject: [PATCH 1/2] v0.0.1: SASS, External SW, Package name, Template --- .../config/webpack.config.dev.js | 34 ++++++++++++ .../config/webpack.config.prod.js | 54 +++++++++++++++++++ packages/react-scripts/package.json | 14 ++--- .../template/public/sw-custom.js | 1 + .../template/src/{App.css => App.scss} | 0 packages/react-scripts/template/src/App.tsx | 2 +- .../template/src/{index.css => index.scss} | 0 packages/react-scripts/template/src/index.tsx | 2 +- 8 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 packages/react-scripts/template/public/sw-custom.js rename packages/react-scripts/template/src/{App.css => App.scss} (100%) rename packages/react-scripts/template/src/{index.css => index.scss} (100%) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d5e6aae24..225f8c671 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -205,6 +205,40 @@ module.exports = { }, ], }, + // SASS Loader + { + test: /\.scss$/, + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + 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', + }), + ], + }, + }, + require.resolve('sass-loader') + ], + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d407f480f..d7010fd52 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -239,6 +239,56 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // SASS Loader + { + test: /\.scss$/, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: require.resolve('style-loader'), + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + 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', + }), + ], + sourceMap: shouldUseSourceMap + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap + } + } + ], + }, + extractTextPluginOptions + ) + ), + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. + }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader doesn't use a "test" so it will catch all modules @@ -349,6 +399,10 @@ module.exports = { navigateFallbackWhitelist: [/^(?!\/__).*/], // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], + // Import custom service worker + importScripts: [ + { filename: publicPath + 'sw-custom.js' } + ] }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how Webpack interprets its code. This is a practical diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fa61b9108..4e022814d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts-ts", - "version": "2.8.0", + "name": "flipdish-react-scripts-fork", + "version": "0.0.1", "description": "Configuration and scripts for Create React App.", - "repository": "wmonk/create-react-app", + "repository": "flipdishbytes/flipdish-create-react-app-typescript", "license": "BSD-3-Clause", "engines": { "node": ">=6" }, "bugs": { - "url": "https://github.com/wmonk/create-react-app/issues" + "url": "https://github.com/flipdishbytes/flipdish-create-react-app-typescript" }, "files": [ "bin", @@ -32,21 +32,23 @@ "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "node-sass": "^4.7.2", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "4.2.1", + "sass-loader": "^6.0.6", + "source-map-loader": "^0.2.1", "style-loader": "0.19.0", + "sw-precache-webpack-plugin": "0.11.4", "ts-jest": "^20.0.7", "ts-loader": "^2.3.7", "tslint": "^5.7.0", "tslint-loader": "^3.5.3", "tslint-react": "^3.2.0", "typescript": "~2.5.3", - "source-map-loader": "^0.2.1", - "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", diff --git a/packages/react-scripts/template/public/sw-custom.js b/packages/react-scripts/template/public/sw-custom.js new file mode 100644 index 000000000..b957b67e8 --- /dev/null +++ b/packages/react-scripts/template/public/sw-custom.js @@ -0,0 +1 @@ +console.log('External service worker loaded'); \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.scss similarity index 100% rename from packages/react-scripts/template/src/App.css rename to packages/react-scripts/template/src/App.scss diff --git a/packages/react-scripts/template/src/App.tsx b/packages/react-scripts/template/src/App.tsx index 921bb811d..b40418ed6 100644 --- a/packages/react-scripts/template/src/App.tsx +++ b/packages/react-scripts/template/src/App.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import './App.css'; +import './App.scss'; const logo = require('./logo.svg'); diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.scss similarity index 100% rename from packages/react-scripts/template/src/index.css rename to packages/react-scripts/template/src/index.scss diff --git a/packages/react-scripts/template/src/index.tsx b/packages/react-scripts/template/src/index.tsx index 1c66245ab..f9d16a20b 100644 --- a/packages/react-scripts/template/src/index.tsx +++ b/packages/react-scripts/template/src/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; -import './index.css'; +import './index.scss'; ReactDOM.render( , From f90f4ae6a10f19b0d9148f89e2a12dce1ed7d070 Mon Sep 17 00:00:00 2001 From: Alain Jacomet Date: Mon, 15 Jan 2018 13:09:39 -0300 Subject: [PATCH 2/2] Scopes package name --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4e022814d..8fc6b4ecd 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,5 +1,5 @@ { - "name": "flipdish-react-scripts-fork", + "name": "@flipdish/react-scripts-ts", "version": "0.0.1", "description": "Configuration and scripts for Create React App.", "repository": "flipdishbytes/flipdish-create-react-app-typescript", pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy