Skip to main content

Styling

Entry Point​

The main SCSS entry file is:

  • src/themes/reactwp/scss/default.scss

Structure​

The default theme SCSS is organized into:

  • inc/ for permanent base rules and runtime-safe CSS
  • templates/ for page-level or screen-level styles that can be imported on demand

The main entry currently composes:

  • inc/_base.scss

What Lives Where​

Typical responsibilities are:

  • inc/_base.scss: resets, shell sizing, smooth-scroll states, and the CSS that should remain even if you remove the starter visuals
  • inc/_variables.scss: simple SCSS path variables such as $font_path and $image_path
  • inc/_functions.scss: reusable SCSS helpers such as the viewport unit functions (vw, vh, svw, dvh, and related helpers)
  • inc/_mixins.scss: a placeholder file for project-level SCSS mixins
  • inc/_font-face.scss: a placeholder file for custom @font-face declarations
  • templates/*: screen or page styles that can be imported directly from the matching React template

What Is Loaded By Default​

ReactWP keeps the default SCSS entry intentionally light.

Today, default.scss only loads:

  • inc/_base.scss

That means:

  • variables, functions, mixins, and font-face are available as starter scaffolding
  • but they are not imported automatically into the compiled theme stylesheet
  • if a project wants to use them, it should opt into them explicitly

Example:

@use './inc/functions' as *;
@use './inc/font-face';
@use './inc/base';

This keeps the CSS baseline smaller while still shipping the helper files many projects expect to find in a starter.

SCSS Helper Files​

inc/_variables.scss​

This file currently exposes lightweight path variables:

  • $font_path
  • $image_path

Use it when you want a central place for asset-relative SCSS values.

In the default theme pipeline, those paths are intended to resolve from the compiled stylesheet in assets/css/, so they point to:

  • ../fonts/
  • ../images/

That means a font file stored in:

  • src/themes/reactwp/medias/fonts/PPNeueMontreal-Regular.woff2

is expected to end up in:

  • dist/wp-content/themes/reactwp/assets/fonts/PPNeueMontreal-Regular.woff2

The theme style pipeline copies theme media directories from src/themes/<theme>/medias/ into the matching dist/.../assets/ folders before Sass output is written.

In prod, the same pipeline also optimizes copied .jpg, .jpeg, .png, .gif, and .svg files in place.

Fonts, audio, video, and other copied assets are still copied as-is. ReactWP does not transcode them or generate precompressed variants for them during the theme style build.

inc/_functions.scss​

This file contains viewport conversion helpers:

  • vw
  • svw
  • lvw
  • dvw
  • vh
  • svh
  • lvh
  • dvh

These are useful when a project still wants SCSS-side viewport math instead of writing raw viewport units by hand everywhere.

inc/_mixins.scss​

This file is currently empty on purpose.

It exists as a project-level place to collect mixins once a theme actually needs them, instead of forcing a default mixin layer before the project has earned one.

inc/_font-face.scss​

This file is also starter scaffolding.

It is not loaded by default, and the sample code inside it is commented out.

If a project wants to register local font files through SCSS, this is the intended place to do it.

That keeps font declarations out of _base.scss and avoids forcing a typography direction on every new project.

Starter Visual Pack​

The shipped Default and NotFound page visuals are grouped into:

  • src/themes/reactwp/scss/templates/reactwp.scss

That file is imported directly by:

  • src/themes/reactwp/js/templates/Default.jsx
  • src/themes/reactwp/js/templates/NotFound.jsx

So if a project wants to remove or replace the shipped starter look, it can edit or delete one screen stylesheet without touching the permanent base entry.

Critical Shell Styling​

ReactWP also prints a small amount of critical shell CSS inline from:

  • src/themes/reactwp/template/functions.php

That inline CSS exists to style:

  • the page background
  • #loader
  • the shell containers needed before the compiled stylesheet is available

The rest of the theme styling comes from the compiled stylesheet asset.

Output​

Theme CSS is compiled as a real stylesheet asset, not only injected through JavaScript.

That makes the theme easier to cache, inspect, and reason about.

The default output path is:

  • dist/wp-content/themes/reactwp/assets/css/reactwp.min.css
  • Keep the permanent reset and runtime CSS in scss/inc/_base.scss
  • Treat scss/inc/_variables.scss, scss/inc/_functions.scss, scss/inc/_mixins.scss, and scss/inc/_font-face.scss as helper files you opt into when needed
  • Keep starter-only colors and utility visuals out of the permanent base
  • Keep page or screen-specific styles in scss/templates/
  • Import screen styles from the React template that owns them when you want them to stay easy to remove
  • Import new global partials through default.scss
  • Avoid mixing runtime orchestration concerns into SCSS organization

This keeps styles easier to grow without turning the theme into one oversized stylesheet.