LogoLogo
9.0.x
9.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase with DDEV
      • Installing Varbase with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Total Control Dashboard
        • Vartheme Claro
        • Vartheme BS4
      • Optional Components
        • Varbase API
        • Varbase Internationalization
        • Varbase Media Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Varbase Style Guide
        • Reroute Email
        • Varbase Updates Helper
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
        • Configure Swift Mailer
        • Switch From Swift Mailer to Symfony Mailer
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
    • Theme Development with Varbase
      • Understanding The Vartheme Base Theme
      • Creating Your Own Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Switch From Node SASS to Dart SASS for Old Sub-Themes
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Switch from CKEditor 4 to CKEditor 5 in Varbase ~9.1.0
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Creating A Sub Profile From Varbase
        • Varbase Sub Profile Generator
        • Varbase Sub Profile Basic Template
        • Varbase Sub Profile Basic Project Template
      • Install Needed YARN and Gulp Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Terminology
    • Accessing the Administration Area
      • Website Environments
    • User Management
      • Allow Email/Username Login & Registration
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
      • Add User
      • Edit User
      • Masquerading as another user
    • Dashboard
      • Reports
    • Content Structure
      • EntityQueues
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • Manage Vocabulary
        • Edit Vocabulary
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
      • Webforms
        • Setting up Emails Handler Conditions
        • Setting up Confirmations Message Settings Types
    • Content Management
      • Create Content
        • Add a Basic page
        • Add a Landing page
        • Add Blog
        • Add Media
          • Image
          • Remote video
          • Video
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Content Moderation
      • Publish Content
      • URL Alias
    • About Layout Builder
      • Section
      • Custom Blocks
        • Heading Block
        • Basic Block
        • Media Block(Image/Video)
        • Rich-Text Editor “WYSIWYG”
      • Managing Blocks
    • Search Engine Optimization
      • XML Sitemap
      • Meta Tags in Varbase
      • URL Redirects
      • Domain Redirects
      • Prevent a Single Content From Being Indexed
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google analytics
        • Mail templates
      • User interface
      • Development
      • Varbase settings
      • Web services
    • Common Error Handling Tips
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • Get Needed Yarn Development Dependencies
  • Initialize
  • Theme Build
  • Watch
  1. Developers
  2. Extending Varbase

Compiling Provided Component Styles

PreviousInstall Needed YARN and Gulp ToolsNextCheck Standards/Practice Coding And Linting

Last updated 2 years ago

In case of wanting to add a new feature or fix a bug in styling for a selected Varbase component.

Get Needed Yarn Development Dependencies

yarn install

Initialize

Initialize the gulp SASS files styling method. Run this only ones for each newly cloned project.

yarn theme:init

Theme Build

Compile source .scss files to .css files. Needs to compile manually on demand.

yarn theme:build

Watch

Watch source .scss files and compile them on saving to .css files. Auto compiling on save of changes for the source.

yarn theme:watch

After any change of code please check the standards before uploading a patch or creating a MR.

Install Needed YARN and Gulp Tools
Check Standards/Practice Coding And Linting