Make Sass missing message friendlier

packages/react-app-polyfill/README.md

@@ -1,11 +1,7 @@
 # react-app-polyfill
 
 This package includes polyfills for various browsers.
-It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects.<br>
-Please refer to its documentation:
-
-- [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
-- [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
+It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects.
 
 ### Features
 
@@ -17,9 +13,17 @@ Each polyfill ensures the following language features are present:
 1. `Symbol` (a built-in object used by `for...of` syntax and friends)
 1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`)
 
-### Entry Points
+### Usage
+
+First, install the package using Yarn or npm:
+
+```bash
+$ npm install react-app-polyfill --save
+$ # or
+$ yarn add react-app-polyfill
+```
 
-You can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.
+Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.
 
 #### Internet Explorer 9
 

packages/react-dev-utils/formatWebpackMessages.js

@@ -102,6 +102,13 @@ function formatMessage(message, isError) {
     ];
   }
 
+  if (lines[1].match(/Cannot find module.+node-sass/)) {
+    lines[1] =
+      'To import Sass files in this project, you need to install node-sass.\n';
+    lines[1] +=
+      'Please run `npm i node-sass --save` or `yarn add node-sass` inside your workspace.';
+  }
+
   // Cleans up syntax error messages.
   if (lines[1].indexOf('Module build failed: ') === 0) {
     lines[1] = lines[1].replace(

packages/react-scripts/template/README.md

@@ -14,7 +14,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm run build](#npm-run-build)
   - [npm run eject](#npm-run-eject)
 - [Supported Browsers](#supported-browsers)
-- [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
+- [Supported Language Features](#supported-language-features)
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
 - [Debugging in the Editor](#debugging-in-the-editor)
@@ -203,11 +203,10 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 
 ## Supported Browsers
 
-By default, the generated project uses the latest version of React.
+By default, the generated project supports all modern browsers.<br>
+Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/next/packages/react-app-polyfill/README.md).
 
-You can refer [to the React documentation](https://reactjs.org/docs/react-dom.html#browser-support) for more information about supported browsers.
-
-## Supported Language Features and Polyfills
+### Supported Language Features
 
 This project supports a superset of the latest JavaScript standard.<br>
 In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
@@ -223,16 +222,10 @@ Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#pr
 
 While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future.
 
-Note that **the project only includes a few ES6 [polyfills](https://en.wikipedia.org/wiki/Polyfill)**:
-
-- [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
-- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
-- [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
+Note that **this project includes no [polyfills](https://en.wikipedia.org/wiki/Polyfill)** by default.
 
 If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
 
-Also note that using some newer syntax features like `for...of` or `[...nonArrayValue]` causes Babel to emit code that depends on ES6 runtime features and might not work without a polyfill. When in doubt, use [Babel REPL](https://babeljs.io/repl/) to see what any specific syntax compiles down to.
-
 ## Syntax Highlighting in the Editor
 
 To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.