Skip to content

Commit e4412ee

Browse files
pugnascotiaTimer
authored andcommitted
Documentation tweaks
1 parent 8b465bc commit e4412ee

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

packages/react-scripts/template/README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
2323
- [Adding a Stylesheet](#adding-a-stylesheet)
2424
- [Post-Processing CSS](#post-processing-css)
2525
- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
26-
- [Adding Images, Fonts and Files](#adding-images-fonts-and-files)
26+
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
2727
- [Using the `public` Folder](#using-the-public-folder)
2828
- [Changing the HTML](#changing-the-html)
2929
- [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
@@ -466,11 +466,13 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
466466

467467
Now running `npm start` and `npm run build` also builds Sass files. Note that `node-sass` seems to have an [issue recognizing newly created files on some systems](https://github.com/sass/node-sass/issues/1891) so you might need to restart the watcher when you create a file until it’s resolved.
468468

469-
## Adding Images, Fonts and Files
469+
## Adding Images, Fonts, and Files
470470

471471
With Webpack, using static assets like images and fonts works similarly to CSS.
472472

473-
You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. For images less than 10,000 bytes, importing them will return a `data:` URL instead of a path, so that they are inlined instead of requiring an extra request to the server to fetch them. To be clear, importing any file with an unknown extension will return the final path to that file.
473+
You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
474+
475+
To reduce the number of requests to the server, importing images that are less than 10,000 bytes return a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebookincubator/create-react-app/issues/1153).
474476

475477
Here is an example:
476478

0 commit comments

Comments
 (0)