blog-cover

🤔 Overview

In large-scale projects maintaining consistent styles across multiple applications is crucial. Here are two key approaches for managing shared styles:

  1. 📦 Creating a shared styles library as a npm package.
  2. 🔗 Directly importing styles from a centralized directory within the monorepo.

📦 1. Creating a Styles Library with npm

Overview: This approach involves creating a dedicated styles library that is published as a npm package. The styles can then be imported into any project that needs them.

Implementation: For example, if you're working with custom theme styles for PrimeReact, you can create your styles in a library and export them using an index.js file like this:

module.exports = {
  theme: require('./style/themes/my-theme/theme.scss'),
};

After publishing the package, you can install it in your projects using:

npm i my-theme

Then, simply import the styles in your main JavaScript entry point:

import 'my-theme';

Pros: Centralized version control of styles. Easy to update and distribute across multiple projects.

Cons: Requires publishing and versioning with each change.

🔗 2. Direct Import from a Centralized Directory

Overview: If you’re using a monorepo setup, you can store your styles in a central directory and import them directly into each project.

Implementation: Place your styles in a folder at the root level, parallel to your apps, and import them in your projects:

import '../style/themes/my-theme/theme.scss';

Pros: No need to publish or manage versions. Immediate access to the latest styles without additional steps.

Cons: Potential for accidental breaking changes if styles are updated. Need to have a monorepo structure; doesn't work if the projects are split into different repositories.

❓ What to choose

  • Use a npm package if you want to have strict version control or you don't have all your projects in the same folder.
  • Use direct importing from a centralized directory if you prefer a simpler solution and your code structure allows it.