Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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
titleButton.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" />;
  }
}

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
titleButton.css
.Button {
  padding: 20px;
}


Using Sass

Info
titleCompiling Sass

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.

...