Page Comparison

It is easy to understand the need for custom styling in webapps. There are many different language tools that make styling in CSS easier, from Less to Sass. Manifold is built to use plain CSS and Sass (which uses the file extension .scss). This page is meant to be a guide on how to properly add stylistic changes to Manifold so your changes are not overwritten.

...

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:

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.

.Button {
  padding: 20px;
}

Using Sass

...