diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e5dd6766f..42d19e45f 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -207,6 +207,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 5fb2fb056..994348c78 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -233,6 +233,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 @@ -343,6 +393,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 713b5eaed..d7843d40f 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts-ts", - "version": "2.13.0", + "name": "@flipdish/react-scripts-ts", + "version": "0.0.2", "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,12 +32,14 @@ "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", @@ -46,6 +48,7 @@ "tsconfig-paths-webpack-plugin": "^2.0.0", "tslint": "^5.7.0", "tslint-react": "^3.2.0", + "typescript": "~2.5.3", "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( ,