style.scss

At Terra, style.scss is the main entry point for all styles in a project. Every global style, utility, and component stylesheet is imported from this file, making it the single source of truth for styling.

---

How it’s used across projects

• WordPress projects

  • In most cases, styles are loaded globally through style.scss.
  • You can see a reference implementation in our starter kit

• Nuxt or Astro projects

  • In these setups, style.scss is usually imported at the layout level (layout.vue or layout.astro) so styles are applied consistently across all pages.

---

Import structure

The file is organized by responsibility, starting with global foundations and moving toward more specific components:

//* Reset, GC
@import "@scss/framework/_var/_vars.scss";
@import "@scss/framework/_mixins/mixins.scss";
@import '@terrahq/gc/library';
@import '@terrahq/wysiwyg/wordpress';
@import '@scssFoundation/reset/_reset.scss';
@import '@scssFoundation/_foundation.scss';
@import '@scssUtilities/_utilities.scss';
@import "@scss/global-components/vars.scss";

//* Preloader
@import '@scssComponents/preloader/_c--preloader-a.scss';

//* Transition
@import '@scssComponents/transition/_c--transition-a.scss';

Organizing new styles

When adding new styles, always group imports logically and consistently:

• By type: global styles, utilities, and individual components
• By functionality: for example, preloader, transitions, lazy loading, etc.

This approach keeps style.scss readable and makes the codebase easier to scale and maintain over time.

Organization matters

Component imports must be ordered alphabetically by component name.

For example: Cards → Heros → Layouts.

Following this rule ensures a predictable structure and avoids confusion as the number of components grows.