Style.scss Structure & Conventions at Terra

At Terra, the style.scss file is the main entry point for all styling. click

In most WordPress-based projects (which is usually the case), styles are imported globally via style.scss - link to file

In Nuxt or Astro projects, this file is typically imported at the layout level—inside layout.vue or layout.astro—to ensure styles are applied across all pages.

//* 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';

//* lazy
@import "@scss/global-components/lazy/_g--lazy-01";

When you build new components, group your imports logically. That means organizing them by type (global, utility, specific component) and by functionality (e.g., preloader, transition). This keeps the structure clean and scalable as the project grows.

NOTE!

⚠️ Additionally, we order component blocks alphabetically — meaning, for example, styles for Cards are imported before those for Heros, and those before Layouts, and so on. This keeps the structure clean, predictable, and easy to scale as the project grows.