Styling

Rekit uses Less or Scss as the css pre-processor. Unlike many practices import style file in a React component, Rekit recommends to just use Less/Sass itself to manage dependencies. This approach has several advantages:

1. Css could be built and generated separately.
2. Importing less from a React component is not a standard way but just a webpack loader's feature.
3. Css-loader for webpack generates duplicate Css code for the build if the component is used more than one time.

The approach used by Rekit is intuitive, described by below picture:

In general, styling for a Rekit application follows below several rules:

1. Global style is defined in src/styles/global.less, such as css for body, h1, h2...
2. Each component has a style file with the same name, for example, component SimpleNav.js has style file named SimpleNave.less.
3. Each feature has a style file named style.less which imports all necessary style files for pages and components. All feature scope common style is also defined in the file.
4. The src/styles/index.less is the entry style file which imports all feature's style.less and global.less.

For other scenarios, feel free to use the way you like.