mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-03-29 22:38:26 +08:00
36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
---
|
|
id: adding-a-stylesheet
|
|
title: Adding a Stylesheet
|
|
sidebar_label: Adding Stylesheets
|
|
---
|
|
|
|
This project setup uses [Webpack](https://webpack.js.org/) 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 the CSS from the JavaScript file**:
|
|
|
|
## `Button.css`
|
|
|
|
```css
|
|
.Button {
|
|
padding: 20px;
|
|
}
|
|
```
|
|
|
|
## `Button.js`
|
|
|
|
```js
|
|
import React, { Component } from 'react';
|
|
import './Button.css'; // Tell Webpack that Button.js uses these styles
|
|
|
|
class Button extends Component {
|
|
render() {
|
|
// You can use them as regular CSS styles
|
|
return <div className="Button" />;
|
|
}
|
|
}
|
|
```
|
|
|
|
**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-blog/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.
|
|
|
|
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.
|
|
|
|
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.
|