; 278 | } 279 | } 280 | ``` 281 | 282 | **This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. 283 | 284 | In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output. 285 | 286 | If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool. 287 | 288 | ## Post-Processing CSS 289 | 290 | This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it. 291 | 292 | For example, this: 293 | 294 | ```css 295 | .App { 296 | display: flex; 297 | flex-direction: row; 298 | align-items: center; 299 | } 300 | ``` 301 | 302 | becomes this: 303 | 304 | ```css 305 | .App { 306 | display: -webkit-box; 307 | display: -ms-flexbox; 308 | display: flex; 309 | -webkit-box-orient: horizontal; 310 | -webkit-box-direction: normal; 311 | -ms-flex-direction: row; 312 | flex-direction: row; 313 | -webkit-box-align: center; 314 | -ms-flex-align: center; 315 | align-items: center; 316 | } 317 | ``` 318 | 319 | There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. 320 | 321 | ## Adding Images and Fonts 322 | 323 | With Webpack, using static assets like images and fonts works similarly to CSS. 324 | 325 | 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. 326 | 327 | Here is an example: 328 | 329 | ```js 330 | import React from 'react'; 331 | import logo from './logo.png'; // Tell Webpack this JS file uses this image 332 | 333 | console.log(logo); // /logo.84287d09.png 334 | 335 | function Header() { 336 | // Import result is the URL of your image 337 | return

; 338 | } 339 | 340 | export default Header; 341 | ``` 342 | 343 | This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths. 344 | 345 | This works in CSS too: 346 | 347 | ```css 348 | .Logo { 349 | background-image: url(./logo.png); 350 | } 351 | ``` 352 | 353 | Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets. 354 | 355 | Please be advised that this is also a custom feature of Webpack. 356 | 357 | **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
358 | An alternative way of handling static assets is described in the next section. 359 | 360 | ## Using the `public` Folder 361 | 362 | >Note: this feature is available with `react-scripts@0.5.0` and higher. 363 | 364 | Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits: 365 | 366 | * Scripts and stylesheets get minified and bundled together to avoid extra network requests. 367 | * Missing files cause compilation errors instead of 404 errors for your users. 368 | * Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. 369 | 370 | However there is an **escape hatch** that you can use to add an asset outside of the module system. 371 | 372 | If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`. 373 | 374 | Inside `index.html`, you can use it like this: 375 | 376 | ```html 377 | 378 | ``` 379 | 380 | Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build. 381 | 382 | When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. 383 | 384 | In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: 385 | 386 | ```js 387 | render() { 388 | // Note: this is an escape hatch and should be used sparingly! 389 | // Normally we recommend using `import` for getting asset URLs 390 | // as described in “Adding Images and Fonts” above this section. 391 | return

; 392 | } 393 | ``` 394 | 395 | Keep in mind the downsides of this approach: 396 | 397 | * None of the files in `public` folder get post-processed or minified. 398 | * Missing files will not be called at compilation time, and will cause 404 errors for your users. 399 | * Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change. 400 | 401 | However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. 402 | 403 | Note that if you add a `