Skip to content

Commit 8b465bc

Browse files
pugnascotiaTimer
authored andcommitted
Revise the documentation around file loading
1 parent 17306c3 commit 8b465bc

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

packages/react-scripts/template/README.md

Lines changed: 3 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 and Fonts](#adding-images-and-fonts)
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,11 @@ 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 and Fonts
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` an image right in a JavaScript module**. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code.
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.
474474

475475
Here is an example:
476476

0 commit comments

Comments
 (0)