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(
,
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