...
To use pure CSS, you can put all of your CSS classes in the "manifoldStyle.css" file. This file is already included in the index.html file and will be retrieved by the browser automatically. No fancy setup is necessary to do this. If you want to create a new .css file to keep things from getting confusing, or to decompose the project, you may do so freely, just remember to edit the index.html file and follow the other examples to link your new css file to the html file.
If you want to keep your css files that are specific to your components in the same folder, you can import it in your component file like this:
Code Block | ||
---|---|---|
| ||
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" />;
}
} |
Webpack automatically sees that this component requires the Button.css file and will send it to the browser for you without needed to put it in the public folder.
Code Block | ||
---|---|---|
| ||
.Button {
padding: 20px;
} |
Using Sass
Info | ||
---|---|---|
| ||
Remember that your changes to Sass files will not be instantly transferred to the public folder. They must first be compiled, as is explained later. |
...