You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-scripts/template/README.md
+5-3Lines changed: 5 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
23
23
-[Adding a Stylesheet](#adding-a-stylesheet)
24
24
-[Post-Processing CSS](#post-processing-css)
25
25
-[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)
27
27
-[Using the `public` Folder](#using-the-public-folder)
28
28
-[Changing the HTML](#changing-the-html)
29
29
-[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
466
466
467
467
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.
468
468
469
-
## Adding Images, Fonts and Files
469
+
## Adding Images, Fonts, and Files
470
470
471
471
With Webpack, using static assets like images and fonts works similarly to CSS.
472
472
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).
0 commit comments