Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

I am currently working on multiple micro SPAs that exist independently within an Express environment. I am facing a challenge with importing a global CSS file that is located outside of the apps, as it is not being recognized.

The use of @import url(assets/global.css) is proving to be ineffective, possibly due to the fact that the CSS file is situated outside of the app "ecosystem".

I do not want to resort to adding a 

<link rel="stylesheet" href="assets/global.css"/>
tag to each index.html, as I aim for the global.css to be bundled together with each app's unique CSS in the built files.

Is there a more efficient way to create and import a global file that can be shared across multiple apps? Would converting it into its own node module and referencing it in such a manner be necessary? This approach seems somewhat complicated.

https://i.sstatic.net/Y2wYU.png

javascriptcssreactjsexpress

Answer №1

One possible solution is to package common components as an npm module and include them as dependencies in your smaller projects. This eliminates the need to reference global files. On the other hand, if you require private npm packages to restrict access from the public, hosting them could come at a cost.

Answer №2

Referencing files outside the project scope is not only insecure but also impossible. If you try to obtain the current path by using console.log(__dirname) in one of your microservices, you will notice that it starts from the src folder and restricts access beyond that point. Unless you're planning on making an Ajax call to your own server, which would be quite unusual behavior.

To make assets accessible within each microservice, consider utilizing a task automation tool like Gulp. You can create a task that duplicates the assets folder into the public (or src) directory of each microservice, enabling easy reference to those resources.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

htmlcsshtml-table

Creating a personalized tooltip hook: A step-by-step guide

Recently, I created a navbar component using JSX. However, when attempting to integrate tooltips into this component, I found myself having to manually insert tooltip code with the title prop for each instance. For illustration purposes, here is an exampl ...

reactjsmaterial-ui

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

I have been working on a face detection app using OpenCv.js within an Angular electron application. To implement this, I decided to utilize the ng-open-cv module from npm modules. However, when attempting to inject the NgOpenCVService into the constructor ...

javascriptangularopencvelectron

Adding a Stripe pay button using Jquery append results in the return of an [object HTMLScriptElement

I'm currently working on dynamically adding the Stripe pay with card button through jQuery. I've decided to append it because I only want it to show up once a specific condition is met by the user, as well as due to the fact that the pricing can ...

javascriptphpjquery

Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...

javascriptjqueryhtmlcsshighcharts

How to Load JavaScript Files into Joomla 2.5 default.php File

When creating a component in Joomla 2.5, I encountered an issue while trying to add some JavaScript code into the layout file tmpl/default.php . To include the JavaScript files, I used the following code: $document->addScript(JURI::base() . "components ...

javascriptphpjoomla

Exploring NextJS: Implementing Routing for Multilingual Support

I am currently working on developing a multilanguage website using Next JS. For the translation functionality, I have integrated the next-translate package into my project. When it comes to generating posts, I have opted for static generation as my appro ...

reactjsnext.jsi18next

The compatibility issues between bcrypt and Next.js 14.0 are causing functionality errors

I'm currently working on implementing an Infinite scrolling feature for displaying posts. This requires utilizing a client component with the use client directive. However, I've encountered an issue: Module parse failed: Unexpected token (1:0) ...

reactjsnext.jsbcrypt

Changing the location where React Native is installed - a step-by-step guide

Hello, I am a newcomer to the world of React Native. I have recently set up my React Native environment by following the instructions outlined in this guide. To install React Native, I used the command below in the C:// directory: npm install -g create-r ...

androidreactjsreact-native

Delete the final comma in a JSON file using JavaScript so that it can be utilized by a Vue application

Using Axios in my Vue app, I am consuming a JSON file. The field "country" contains trailing commas which are creating issues. Here is the structure of the JSON: "country": "spain,france," .... "country": " ...

javascriptvue.jsvuejs2

What is the correct way to utilize an absolute path in an npm library?

Is there a way to enable the use of absolute paths in a library that will be imported into other apps, such as React or Expo? I've tried defining a babel config in the root of the library and using it in Expo without success. Any suggestions on how to ...

reactjsnpmexpo

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Comparison: executing an immediately invoked function expression (IIFE) and a separate

During my recent refactoring of some legacy code, I stumbled upon the following example: // within another function const isTriggerValid = await (async () => { try { const triggers = await db.any(getTriggerBeforeBook, { param ...

javascriptnode.jstypescript

Loading SVGs on the fly with Vue3 and Vite

Currently, I am in the process of transitioning my Vue2/Webpack application to Vue3/Vite. Here's an example of what works in Vue2/Webpack: <div v-html="require('!!html-loader!../../assets/icons/' + this.icon + '.svg')" ...

javascriptvue.jsvuejs3vite

HTML5 elements expand to fit the dimensions of the window

While creating an HTML5 page, I observed that div elements without specified widths within sections like "header" and "footer" only occupy the width of the window. For instance: <header> <div id="header-background" style="background: #ddd"> ...

csshtml

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

javascriptjqueryhtml

Struggling to create an access token with the Slack API

My goal is to retrieve an access token from the Slack API. When I use the code provided below, it generates an authorization URL containing a temporary code in the query string. Once permissions are granted, the process redirects to /slack/oauthcallback. ...

javascriptnode.jsaccess-tokenslack-api

Testing the MatDialog Component

Currently, I am in the process of creating a unit test for my confirmation modal that relies on MatDialog. The initial test I have set up is a simple one to ensure that the component is successfully created. Below is the code snippet from my spec file: im ...

javascriptangulartypescriptkarma-jasmine

Transferring data from a child component to a parent component following a click event in the child component that activates a function

When a "click event" occurs on the chevron <button> within the <Nav/> component, it triggers the nextTitle(length) function in the custom hook useNextTitle.js. This function updates the value of val, which is then returned by useNextTitle.js. T ...

reactjsreact-hooks

Top method for setting a cookie in the App router server component using NextJS

I am faced with a task that involves updating a flag in the database and creating a cookie with a 5-minute expiry time whenever a page is loaded. Furthermore, upon subsequent page loads, I need to check if the cookie has expired, update the flag, and gener ...

reactjsnext.jscookies