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: template/README.md
+9-18Lines changed: 9 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -87,10 +87,7 @@ Learn more about ES6 modules:
87
87
88
88
### Add a Stylesheet
89
89
90
-
This project setup uses [Webpack](https://webpack.github.io/) for handling all assets.
91
-
Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript.
92
-
93
-
To express that a JavaScript file depends on a CSS file, you need to import it from the JavaScript file:
90
+
This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import it from the JavaScript file:
94
91
95
92
#### `Button.css`
96
93
@@ -114,16 +111,11 @@ class Button extends Component {
114
111
}
115
112
```
116
113
117
-
**This is not required for React** but many people find this feature convenient.
118
-
However be aware that this makes your code less portable to other build tools and environments than Webpack.
119
-
120
-
In development, this allows your styles to be reloaded on the fly as you edit them.
121
-
In production, all CSS files will be concatenated into a single minified `.css` file in the build output.
114
+
**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.
122
115
123
-
You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b).
116
+
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.
124
117
125
-
However **you are welcome to ignore it and put all your CSS in `src/index.css` if you prefer so.**
126
-
It is imported from `src/index.js`, and you can always remove that import if you migrate to a different build tool.
118
+
However **you are welcome to ignore it and put all your CSS in `src/index.css` if you prefer so.** It is imported from `src/index.js`, and you can always remove that import if you migrate to a different build tool.
127
119
128
120
### Post-Process CSS
129
121
@@ -162,8 +154,7 @@ There is currently no support for preprocessors such as Less, or for sharing var
162
154
163
155
With Webpack, using static assets like images and fonts works similarly to CSS.
164
156
165
-
You can `import` an image right in a JavaScript. This tells Webpack to include that image in the bundle.
166
-
The *result* of the import is the image filename from the build output folder.
157
+
You can `import` an image right in a JavaScript. This tells Webpack to include that image in the bundle. The *result* of the import is the image filename from the build output folder.
167
158
168
159
Here is an example:
169
160
@@ -191,11 +182,11 @@ This works in CSS too:
191
182
192
183
Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle.
193
184
194
-
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.
185
+
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.
186
+
187
+
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.
195
188
196
-
Please be advised that this is also a custom feature of Webpack.
197
-
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
198
-
However it may not be portable to some other environments (for example, Node.js and Browserify).
189
+
Please be advised that this is also a custom feature of Webpack. **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify.
199
190
200
191
If you’d prefer to add and reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will add support for this.
0 commit comments